# 一、资讯中心【新闻中心】列表
步骤：
- 先创建页面：pages/list/list.vue
- 在page.json文件进行配置
"pages": [
...
{
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText": "资讯中心",
"navigationStyle": "custom" ,//隐藏系统导航栏,
"navigationBarTextStyle": "white"
}
},
],
# ① 导航栏部分
<template>
<view>
<!-- #ifdef APP-PLUS -->
<u-navbar title="资讯中心" :border="false" bgColor="#1989fa"
leftIconColor="#ffffff" titleStyle="color:#ffffff;" autoBack placeholder>
<view class="u-nav-slot" slot="right" style="border: 1px solid #efefef;">
<u-icon name="more-dot-fill" size="19" color="#ffffff"></u-icon>
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
<u-icon name="home" size="20" color="#ffffff"></u-icon>
</view>
</u-navbar>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<u-navbar title="资讯中心" autoBack bgColor="#1989fa" placeholder
leftIconColor="#ffffff" titleStyle="color:#ffffff;"></u-navbar>
<!-- #endif -->
</view>
</template>
<script>
</script>
<style>
@import '/common/css/common.v1.css';
</style>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
background-color: $u-bg-color;
}
/* #endif */
.u-page {
padding: 0;
flex: 1;
background-color: $u-bg-color;
&__item {
&__title {
color: $u-tips-color;
background-color: $u-bg-color;
padding: 15px;
font-size: 15px;
&__slot-title {
color: $u-primary;
font-size: 14px;
}
}
}
}
.u-nav-slot {
@include flex;
align-items: center;
justify-content: space-between;
border-width: 0.5px;
border-radius: 100px;
border-color: $u-border-color;
padding: 3px 7px;
opacity: 0.8;
}
</style>
# ② 信息列表部分
<template>
<view>
...
<!-- 信息列表 -->
<view class="my-2 px-2">
<view class="bg-white rounded-lg p-2 mb-2">
<text class="text font-weight-bolder font-lg" style="line-height: 1.4;text-align: justify;">能源局：2022年乡村振兴定点帮扶和对口支援工作要点 持续推进农村电网薄弱地区建设</text>
<text class="u-line-3 my-2 text-light-muted" style="line-height: 1.4;text-align: justify;">近日国家能源局印发2022年乡村振兴定点帮扶和对口支援工作要点的通知。文件提出，持续推进农村电网薄弱地区建设，优化城乡网架结构，提升农村电网供电保障水平，增强农村分布式可再生能源接入能力。加快推进通渭县平襄110千伏变电站等重点工程建设。推动通渭、清水县配电网建设示范县、“获得电力”服务水平样板工程建设，巩固提升信丰县全国小康用电示范县成果。</text>
<u--image showLoading src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20241211/1733906801435_79206487.png"
width="100%" height="160px" radius="5px"></u--image>
<view class="flex justify-between align-center mt-2">
<text class="text-muted font-sm">3个小时前</text>
<text class="text-muted font-sm">15万+ 阅读</text>
</view>
</view>
<view class="bg-white rounded-lg p-2 mb-2">
<text class="text font-weight-bolder font-lg" style="line-height: 1.4;text-align: justify;">水电站如何做到精准防汛？请看黄河、长江骨干水库如何做到的</text>
<text class="u-line-3 my-2 text-light-muted" style="line-height: 1.4;text-align: justify;">为确保骨干水库持续高水位运用期间的防汛安全，水利部等相关各级部门密切关注汛情，做好防汛会商、精准调度等工作，充分发挥水库防洪和经济效益。</text>
<u--image showLoading src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20241211/1733907139668_76380519.jpg"
width="100%" height="160px" radius="5px"></u--image>
<view class="flex justify-between align-center mt-2">
<text class="text-muted font-sm">3个小时前</text>
<text class="text-muted font-sm">20万+ 阅读</text>
</view>
</view>
<view class="bg-white rounded-lg p-2 mb-2">
<text class="text font-weight-bolder font-lg" style="line-height: 1.4;text-align: justify;">变压器直流电阻测试仪的保养小窍门</text>
<text class="u-line-3 my-2 text-light-muted" style="line-height: 1.4;text-align: justify;">睿晨电网建设工程有限公司主要从事电力工程，规划设计 变电站电力设备，高压试验设备，变电线路检测设备，自动化控制系统，在线监测系统，信息化集成， 实验仪器仪表等研制、生产、销售、技术、售后服务，公司的主要产品有各种电力测试的解决方案，耐电压试验系列， 调频串联谐振试验装置、电力设备的在线监测系统，冲击耐压、 水利水电信息化，无局放试验系列、油化测定，FS6检查系列等等，经营的产品广泛涉足工业自动化与城乡电网的建设、 改造和铁路、航天航空、高等院校、实验室、通信、环保、质检、医疗等领域。</text>
<view class="flex justify-between align-center mt-2">
<text class="text-muted font-sm">3个小时前</text>
<text class="text-muted font-sm">20万+ 阅读</text>
</view>
</view>
</view>
...
</view>
</template>
<style>
@import '/common/css/common.v1.css';
</style>
# 二、信息详情页
步骤：
- 先创建页面：pages/detail/detail.vue
- 在page.json文件进行配置
"pages": [
...
{
"path" : "pages/detail/detail",
"style" :
{
"navigationBarTitleText": "信息详情",
"navigationBarBackgroundColor": "#ffffff",
"h5": {
"titleNView": false
},
"titleNView":{
"titleColor":"#666666",
"titleText":"",
"backButton":{
"color":"#333333"
}
}
}
}
],
pages/detail/detail.vue页面代码：
<template>
<view>
<!-- 页面详情 -->
<view class="py-3 px-3 " >
<text class="text font-weight-bolder font-lg" style="line-height: 1.4;text-align: justify;">能源局：2022年乡村振兴定点帮扶和对口支援工作要点 持续推进农村电网薄弱地区建设</text>
<view class="flex align-center justify-between mt-2">
<text class="text-muted font-sm">3个小时前</text>
<text class="text-muted font-sm">15万+ 阅读</text>
</view>
<!-- 页面内容 -->
<view class="py-3" style="line-height: 1.8;text-align: justify;">
<!-- {{data}} -->
<!-- <rich-text :nodes="data"></rich-text> -->
<u-parse :content="data" domain="http://lesson06.51yrc.com"></u-parse>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
data:`
<p>近日国家能源局印发2022年乡村振兴定点帮扶和对口支援工作要点的通知。文件提出，持续推进农村电网薄弱地区建设，优化城乡网架结构，提升农村电网供电保障水平，增强农村分布式可再生能源接入能力。加快推进通渭县平襄110千伏变电站等重点工程建设。推动通渭、清水县配电网建设示范县、“获得电力”服务水平样板工程建设，巩固提升信丰县全国小康用电示范县成果。</p>
<p style="text-align: center;"><img src="/public/uploads/Diy/adminImg/20241211/1733906801435_79206487.png" width="657" height="438"></p>
<p>一、协调推动基础设施建设</p>
<p>（一）持续提升供电保障能力。持续推进农村电网薄弱地区建设，优化城乡网架结构，提升农村电网供电保障水平，增强农村分布式可再生能源接入能力。加快推进通渭县平襄110千伏变电站等重点工程建设。推动通渭、清水县配电网建设示范县、“获得电力”服务水平样板工程建设，巩固提升信丰县全国小康用电示范县成果。〔新能源司、电力司、监管司，华中能源监管局、甘肃能源监管办〕</p>
<p>（二）协调推动天然气项目建设。支持通渭、清水两县与管网企业开展合作，指导建设输气支线管道项目。推动西气东输管道天然气信丰分输站开口，2022年底前通气供气。〔油气司〕</p>
<p>（三）指导信丰电厂建设运行。推动信丰电厂一期项目2台机组2022年上半年按期投产、安全稳定运行；协助信丰电厂增加煤炭来源，稳定煤炭供应。结合全国和江西省电力供需变化趋势，指导信丰县开展信丰电厂二期扩建项目前期研究。指导信丰电厂建设资源综合利用项目。〔科技司、电力司、煤炭司，华中能源监管局〕</p>
<p>（四）推动清陇高速公路规划建设。商请有关部门支持清水县公路建设，将清水县至陕西陇县高速公路项目纳入相关交通规划。〔规划司牵头〕</p>
<p>二、培育壮大可再生能源产业</p>
<p>（五）风电项目建设。加快通渭县寺子川10万千瓦风电项目、清水县黄门5万千瓦风储一体化电站项目建设，力争2022年底前建成并网运行。指导三县开展新建风电开发论证。〔新能源司、电力司、安全司〕</p>
<p>（六）光伏项目建设。积极推动通渭马营镇10万千瓦集中式光伏电站、清水黄门10万千瓦农光储一体化电站项目建设，力争2022年底前建成并网运行。支持三县分布式光伏项目有序建设及并网。指导通渭县建设孟河村光储微电网试点项目。〔新能源司、电力司，华中能源监管局、甘肃能源监管办〕</p>
<p>（七）抽水蓄能项目规划建设。指导清水县开展黄龙抽水蓄能电站项目前期工作。在条件成熟的前提下，将信丰抽水蓄能项目滚动列入“十四五”重点实施项目库。〔新能源司〕</p>
<p>（八）生物质能开发利用。鼓励通渭、清水县在生物质资源丰富的中心村、易地扶贫搬迁安置点开展生物质供暖试点，探索生物质资源开发利用新模式。〔新能源司〕</p>
<p>（九）农村清洁能源创新利用。协调支持通渭多能互补帮扶示范项目、清水陇东南清洁能源示范区项目建设。指导三县有条件的易地搬迁新村、中心村、大型农村社区创新生产生活用能方式，提升农村可再生能源利用水平。〔新能源司〕</p>
<p>三、加大社会帮扶力度</p>
<p>（十）动员社会帮扶。协调动员能源企业、公益组织等社会力量提供无偿帮扶资金和物资，支持三县特色产业发展和基础设施建设。〔规划司牵头，局内各单位参与〕</p>
<p>（十一）开展就业帮扶。协调在通渭、清水县施工的能源企业优先在本地招用劳动力，开展必要的技能培训。协调企业优先招聘三县应届大学生，继续开展核苗计划。〔规划司、核电司，核电中心，局内各单位参与〕</p>
<p>（十二）深化消费帮扶。组织局内党员干部积极购买三县特色农产品，各单位工会、食堂在购买慰问品、食材采购时优先选用三县产品。协调企业、社会组织购买三县产品，助力强化自有电商品牌，优化能源行业消费帮扶合作平台，进一步拓展销售渠道。〔各单位，机关工会〕</p>
<p>四、强化党建和人才帮扶</p>
<p>（十三）持续开展党支部结对共建。相关基层党组织要加强与结对村党支部的联系互动，重点从文化振兴、生态振兴、组织振兴方面探索创新共建形式，帮助提升组织力和党建水平。〔机关党委（人事司），有结对任务的单位〕</p>
<p>（十四）支持三县用好红色教育资源。协助三县宣传红色历史和红色旅游资源，组织局党员干部开展相关学习教育和主题党日活动。〔机关党委（人事司），各单位〕</p>
<p>（十五）加强挂职干部管理。做好挂职干部到期轮换工作，加强挂职干部日常管理，关心挂职干部生活，及时帮助解决工作和生活中的困难。视工作实际需要，可考虑协调安排三县干部在能源局系统挂职。〔机关党委（人事司）、规划司，派出挂职干部单位〕</p>
<p>（十六）组织专题培训。组织专家、学者赴三县授课，组织光伏、电力等运维管理及安全生产培训，根据工作需要，适时组织基层干部、致富带头人开展乡村振兴培训。〔机关党委（人事司）、规划司、安全司，华中能源监管局，甘肃能源监管办，相关单位〕</p>
<p>（十七）协调加强产学研合作。指导通渭县与中国农业科学院饲料研究所合作建设西北草畜与中药材产业试验站，开展光伏农业、技术推广、专家库建设等工作。〔规划司〕</p>
<p>（十八）开展教育帮扶。组织全局干部捐助低收入家庭学生，组织青年干部开展支教活动。协调企业、公益组织和爱心人士开展各类助学活动。〔机关团委，各单位〕</p>
<p>五、工作要求</p>
<p>（十九）着力提升帮扶成效。各单位要持续推进既有长效帮扶举措，定期了解帮扶成效，并根据乡村振兴新形势的需要，围绕提高脱贫户和边缘户自我发展能力，调整帮扶方式或开展新的帮扶项目，确保帮扶工作力度不减。</p>
<p>（二十）发挥政策试点作用。各单位要结合能源行业发展需要，将三县作为政策创新突破的试验田，组织建设试点工程，通过挂职干部一线摸排，及时发现问题，为政策制订提供思路和案例。</p>
<p>（二十一）拓展乡村振兴渠道。按照中央关于全面推进乡村振兴的决策部署，在发挥能源行业优势，继续帮助三县产业、人才、组织振兴的同时，各单位要在改善农村人居环境、加强农村精神文明建设方面拓展工作渠道、加大工作力度，助力实现生态振兴、文化振兴。</p>
`,
}
},
methods: {
}
}
</script>
<style>
</style>
# 三、联系我们页面
# ① 联系方式展示及初步使用表单组件提交数据验证
步骤：
- 先创建页面：pages/contact/contact.vue
- 在page.json文件进行配置
"pages": [
...
{
"path" : "pages/contact/contact",
"style" :
{
"navigationBarTitleText": "联系我们",
"navigationStyle": "custom" ,//隐藏系统导航栏,
"navigationBarTextStyle": "white"
}
}
],
pages/contact/contact.vue页面代码：
<template>
<view>
<!-- 导航栏 -->
<view>
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
<u-navbar title="联系我们" bgColor="#1989fa" autoBack placeholder
leftIconColor="#ffffff" titleStyle="color:#ffffff;"></u-navbar>
<!-- #endif -->
</view>
<!-- 联系我们 -->
<view class="p-2">
<view class="bg-white rounded-lg p-2 mb-2">
<u--text prefixIcon="account" iconStyle="font-size: 19px;margin-right:20px" text="睿晨电网建设工程有限公司"></u--text>
</view>
<view class="bg-white rounded-lg p-2 mb-2">
<u--text prefixIcon="map" iconStyle="font-size: 19px;margin-right:20px" text="北京CBD帝国大厦999层-1001号"></u--text>
</view>
<view class="bg-white rounded-lg p-2 mb-2">
<u--text prefixIcon="phone" iconStyle="font-size: 19px;margin-right:20px" text="010-8888-0000" mode="phone"></u--text>
</view>
<view class="bg-white rounded-lg p-2 mb-2">
<u--text prefixIcon="email" iconStyle="font-size: 19px;margin-right:20px" text="RUICHENGxxx@163.COM"></u--text>
</view>
<!-- 在线留言 -->
<view class="bg-white rounded-lg p-2 mb-2">
<text class="text-light-muted font-sm">在线留言，专业项目经理为您免费咨询！</text>
<u--form ref="uForm" :model="form" :rules="rules">
<u-form-item label="您的称呼" prop="userInfo.username"
labelWidth="80px" borderBottom>
<u--input v-model="form.userInfo.username" border="none"></u--input>
</u-form-item>
<u-button @click="submit" customStyle="margin:20px 0px;" type="primary">提交</u-button>
</u--form>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
form: {
userInfo:{
username: '',
}
},
rules: {
'userInfo.username':[
{
type: 'string',
required: true,
message: '请填写您的称呼',
trigger: ['blur', 'change']
}, {
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
validator: (rule, value, callback) => {
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
return uni.$u.test.chinese(value);
},
message: "姓名必须为中文",
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
trigger: ["change", "blur"],
}
],
},
}
},
methods: {
submit() {
this.$refs.uForm.validate().then(res => {
uni.$u.toast('校验通过')
console.log(this.form);
}).catch(errors => {
uni.$u.toast('校验失败')
})
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
background-color: $u-bg-color;
}
/* #endif */
</style>
# ② 完成留言板界面和数据验证
<template>
<view>
<!-- 导航栏 -->
<view>
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
<u-navbar title="联系我们" bgColor="#1989fa" autoBack placeholder
leftIconColor="#ffffff" titleStyle="color:#ffffff;"></u-navbar>
<!-- #endif -->
</view>
<!-- 联系我们 -->
<view class="p-2">
<view class="bg-white rounded-lg p-2 mb-2">
<u--text prefixIcon="account" iconStyle="font-size:19px;margin-right:20px;"
text="睿晨电网建设工程有限公司"></u--text>
</view>
<view class="bg-white rounded-lg p-2 mb-2">
<u--text prefixIcon="map" iconStyle="font-size:19px;margin-right:20px;"
text="北京CBD帝国大厦999层-1001号"></u--text>
</view>
<view class="bg-white rounded-lg p-2 mb-2">
<u--text prefixIcon="phone" iconStyle="font-size:19px;margin-right:20px;"
text="010-8888-0000"></u--text>
</view>
<view class="bg-white rounded-lg p-2 mb-2">
<u--text prefixIcon="email" iconStyle="font-size:19px;margin-right:20px;"
text="RUICHENGxxx@163.COM"></u--text>
</view>
<!-- 在线留言 -->
<view class="bg-white rounded-lg p-2 mb-2">
<text class="text-light-muted font-sm">在线留言，专业项目经理为您免费咨询！</text>
<u--form ref="uForm1" :model="form" :rules="rules">
<!-- 称呼 -->
<u-form-item label="您的称呼" prop="username"
labelWidth="80px" borderBottom>
<u--input v-model="form.username" border="none" placeholder="请输入您的称呼"></u--input>
</u-form-item>
<!-- 电话 -->
<u-form-item label="您的电话" prop="telnumber"
labelWidth="80px" borderBottom>
<u--input v-model="form.telnumber" border="none" placeholder="请输入您的电话"></u--input>
</u-form-item>
<!-- 留言 -->
<u-form-item label="您的留言" prop="message"
labelWidth="80px" borderBottom>
<u--textarea v-model="form.message" count
placeholder="选填,最多140个字" maxlength="140"></u--textarea>
</u-form-item>
<!-- 提交按钮 -->
<u-button @click="submit" type="primary" customStyle="margin:20px 0px;">提交</u-button>
</u--form>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
form:{
username:'',
telnumber:'',
message:'',
},
rules:{
username:[
{
type:'string',
required:true,
message:'请填写您的称呼',
trigger:['blur','change'],
},
// 2-15个字符之间的判断
{
min: 2,
max: 15,
message: '称呼最少两个字，最多15个字'
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.chinese(value);
},
message: '您的称呼必须是中文',
// 触发器可以同时用blur和change
trigger: ['change','blur'],
}
],
telnumber:[
{
type:'integer',
required:true,
message:'请填写您的电话',
trigger:['blur','change'],
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value);
},
message: '您的电话号码填写有误',
// 触发器可以同时用blur和change
trigger: ['change','blur'],
}
],
message:{
max: 140,
message: '留言最多140个字'
}
}
}
},
onReady() {
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
this.$refs.uForm1.setRules(this.rules);
},
methods: {
submit(){
this.$refs.uForm1.validate().then(res => {
uni.$u.toast('校验通过')
console.log('校验通过的数据',this.form);
}).catch(errors => {
uni.$u.toast('校验失败')
})
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
background-color: $u-bg-color;
}
/* #endif */
</style>
# 四、工程案例页面
- 先创建页面：
pages/piclist/piclist.vue - 在page.json文件进行配置
"pages": [
...
{
"path" : "pages/piclist/piclist",
"style" :
{
"navigationBarTitleText": "工程案例",
"navigationStyle": "custom" ,//隐藏系统导航栏,
"navigationBarTextStyle": "white"
}
}
],
pages/piclist/piclist.vue页面代码：
<template>
<view>
<!-- 导航栏 -->
<view>
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
<u-navbar title="工程案例" bgColor="#1989fa" autoBack placeholder leftIconColor="#ffffff"
titleStyle="color:#ffffff;"></u-navbar>
<!-- #endif -->
</view>
<!-- 工程案例 -->
<view class="p-2">
<!-- 卡片 -->
<view class="mb-3">
<uni-card padding="0" spacing="0" margin="0" title="1个小时前发布" extra="浏览:2万+">
<template v-slot:cover>
<view class="custom-cover">
<!-- <image class="cover-image" mode="aspectFill"
src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png">
</image> -->
<u--image
src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240523/1716438574482_64182211.jpg"
width="100%" height="160px" showLoading radius="0px" mode="aspectFill">
<template v-slot:loading>
<u-loading-icon color="red"></u-loading-icon>
</template>
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u--image>
<view class="cover-content">
<text class="uni-subtitle uni-white u-line-1">碧桂园鸟语花香配电工程</text>
</view>
</view>
</template>
<view class="p-2">
<text class="u-line-3 text-light-muted font-sm" style="text-align: justify;">
碧桂园鸟语花香配电工程是我司湖南分公司接收的工程，改工程于2023年8月18号动工，竣工时间是2024年2月23日，已通过验收。
</text>
</view>
</uni-card>
</view>
<view class="mb-3">
<uni-card padding="0" spacing="0" margin="0" title="1个小时前发布" extra="浏览:2万+">
<template v-slot:cover>
<view class="custom-cover">
<!-- <image class="cover-image" mode="aspectFill"
src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png">
</image> -->
<u--image
src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240523/1716436185375_72514793.jpg"
width="100%" height="160px" showLoading radius="0px" mode="aspectFill">
<template v-slot:loading>
<u-loading-icon color="red"></u-loading-icon>
</template>
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u--image>
<view class="cover-content">
<text class="uni-subtitle uni-white u-line-1">光谷一号变电工程</text>
</view>
</view>
</template>
<view class="p-2">
<text class="u-line-3 text-light-muted font-sm" style="text-align: justify;">
光谷一号变电工程是我司湖南分公司接收的工程，改工程于2023年8月18号动工，竣工时间是2024年2月23日，已通过验收。
</text>
</view>
</uni-card>
</view>
<view class="mb-3">
<uni-card padding="0" spacing="0" margin="0" title="1个小时前发布" extra="浏览:2万+">
<template v-slot:cover>
<view class="custom-cover">
<!-- <image class="cover-image" mode="aspectFill"
src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png">
</image> -->
<u--image
src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240523/1716435581200_78379477.jpg"
width="100%" height="160px" showLoading radius="0px" mode="aspectFill">
<template v-slot:loading>
<u-loading-icon color="red"></u-loading-icon>
</template>
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u--image>
<view class="cover-content">
<text class="uni-subtitle uni-white u-line-1">东城千伏变电站</text>
</view>
</view>
</template>
<view class="p-2">
<text class="u-line-3 text-light-muted font-sm">
东城千伏变电站是我司湖南分公司接收的工程，改工程于2023年8月18号动工，竣工时间是2024年2月23日，已通过验收。
</text>
</view>
</uni-card>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
background-color: $u-bg-color;
}
/* #endif */
</style>
<style lang="scss">
.custom-cover {
flex: 1;
flex-direction: row;
position: relative;
}
.cover-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: rgba($color: #000000, $alpha: 0.4);
display: flex;
flex-direction: row;
align-items: center;
padding-left: 15px;
font-size: 14px;
color: #fff;
}
</style>