睿晨网

# 一、swiper广告图

可以针对不同的平台，进行广告图样式的设置
以下是H5端，指示器形式的样式展示代码：

# ① 多种指示器形式样式展示

// index.vue
<template>
	<view>
        ...
        <!-- swiper广告图 -->
		<!-- #ifdef H5 -->
            <!-- 基础样式 -->
            <u-swiper :list="list1" :indicator="true" indicatorMode="dot" :autoplay="true" 
            :circular="true" :height="180" :radius="0"></u-swiper>

            <!-- 自定义指示器：圆点 -->
            <u-gap bgColor="transparent" height="15"></u-gap>
            <u-swiper :list="list1" @change="e => current = e.current" 
            autoplay circular :radius="0" :height="180">
                <view slot="indicator" class="indicator">
                    <view class="indicator__dot"  v-for="(item, index) in list1" :key="index"
                    :class="[index === current && 'indicator__dot--active']">
                    </view>
                </view>
            </u-swiper>

            <!-- 自定义指示器：数字 -->
            <u-gap bgColor="transparent" height="15"></u-gap>
            <u-swiper :list="list1" @change="e => current = e.current" :autoplay="true" 
            indicatorStyle="right: 20px" circular :radius="0" :height="180">
                <view slot="indicator" class="indicator-num">
                    <text class="indicator-num__text">{{ current + 1 }}/{{ list1.length }}</text>
                </view>
            </u-swiper>
		<!-- #endif -->
        ...
    </view>
</template>
<script>
	export default {
		data() {
			return {
				current:0,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
			}
		},
    }
</script>
<style lang="scss">
    .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
</style>

# ② 带标题的轮播图

<template>
	<view>
        ...
        <!-- 轮播图：有标题加点背景 -->
		<view style="padding-left: 10px;padding-right: 10px;
        background-image: linear-gradient(to bottom,#1989fa 0%,#70d6f2 80%);
		border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;">
		    <u-swiper :list="list2" autoplay circular :height="150" 
            :radius="10" showTitle keyName="src"></u-swiper>
		</view>
        ...
    </view>
</template>
<script>
	export default {
		data() {
			return {
                list2:[
					{
						src:'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title:'第一张广告图'
					},
					{
						src:'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title:'第二张广告图'
					},
					{
						src:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title:'第三张广告图'
					},
				],
            }
        }
    }
</script>

# ③ 图片视频混合的轮播图

<template>
	<view>
         ...
         <!-- 轮播图：带图片和视频混合 -->
		 <u-swiper :list="list3"  :radius="10"  keyName="url" 
         :autoplay="true" circular :height="150"></u-swiper>
         ...
    </view>
</template>
<script>
	export default {
		data() {
			return {
                list3: [
					{
						url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东',
						poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						type: 'video'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '身无彩凤双飞翼，心有灵犀一点通',
						type: 'image'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						type: 'image'
					},
				],
            }
        }
    }
</script>

# ④ 卡片式轮播图

<template>
	<view>
         ...
         <!-- 轮播图：卡片式 -->
		 <u-swiper :list="list3"  :radius="10"  keyName="url" 
         :autoplay="true" previousMargin="50" nextMargin="50" 
		 circular bgColor="#ffffff" :height="150"></u-swiper>
         ...
    </view>
</template>
<script>
	export default {
		data() {
			return {
                list3: [
					// {
					// 	src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					// 	poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					// 	type: 'video'
					// },
					{
						src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347846723_46195408.png',
						title: '规划设计',
						type: 'image'
					},
					{
						src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347904014_12078316.png',
						title: '施工建设',
						type: 'image'
					},
					{
						src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png',
						title: '电力设备销售',
						type: 'image'
					},
				],
            }
        }
    }
</script>

# 二、消息滚动通知

<template>
	<view>
        ...
        <!-- 消息滚动通知 -->
		<view style="margin-top: 10px;margin-bottom:10px;
        padding-left: 10px;padding-right: 10px;">
			<u-notice-bar :text="noticetext" direction="column" icon="volume" color="#1989fa" 
			bgColor="#ecf5ff" fontSize="14" duration="4000" @click="openNotice"></u-notice-bar>
		</view>
        ...
    </view>
</template>
<script>
	export default {
		data() {
			return {
                notices:[
					{
					   titles:"我司顺利通过“质量、安全及职业健康安全管理体系",
					   url:"xxx1",
					},
					{
					   titles:'2022年8月2日到3日中电联（北京）认证中心委派2位审核专家对我司质量、安全及职业健康安全管理体系进行审',
					   url:"xxx2",
					},
					
				]
            }
        },
        computed:{
			// 滚动消息内容
			noticetext(){
				let text = [];
				this.notices.forEach(e=>text.push(e.titles));
				return text;
			}
		},
        methods: {
            //点击滚动消息
			openNotice(index){
				console.log('点击滚动消息',this.notices[index]);
			}
        }
    }
</script>

# 三、引入公共样式（css样式库）

# ① 公共样式（css样式库）详细代码及说明

查看公共样式详细css代码：点击查看公共样式（css样式库）

# ② 引入公共样式替换之前写的行内样式

引入公共样式之后，对首页之前开发的栏目用class类名替换，最终代码如下：

# 第一步：创建css文件 /common/css/common.v1.css，复制公共样式代码到该文件中；

# 第二步：在页面中引入公共样式，代码如下：

<template>
	<view>
    ...
    </view>
</template>
<script>
...
</script>
<style>
	@import '/common/css/common.v1.css';
</style>

# 第三步：用公共样式替换之前写的行内样式，最终代码如下：

<template>
	<view>
		
		<!-- 顶部导航栏 -->
		<!-- #ifdef APP-PLUS || MP-WEIXIN  -->
		<u-navbar :safeAreaInsetTop="true" title="首页" placeholder fixed
		:border="false" leftIcon="arrow-left" leftText="返回" 
		rightIcon="share-square" rightText="分享" bgColor="#1989fa"
		titleWidth="400rpx" height="44px" leftIconSize="20px"
		leftIconColor="#ffffff" titleStyle="color:#ffffff;">
		   <view slot="left"></view>
		   <view slot="right">
			   <!-- #ifdef APP-PLUS -->
			   <u-icon name="more-dot-fill" color="#ffffff"></u-icon>
			   <!-- #endif -->
		   </view>
		</u-navbar>
		<!-- #endif -->
		
		
		<!-- swiper广告图 -->
		<!-- #ifdef APP-PLUS || MP-ALIPAY -->
		<!-- 轮播图：有标题 -->
		<view style="background-image: linear-gradient(to bottom,#1989fa 0%,#70d6f2 80%);border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;" class="px-2">
			<u-swiper :list="list3" autoplay circular :height="180" keyName="src" showTitle :radius="20"></u-swiper>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- 轮播图：卡片式 -->
		<view class="pt-2">
			<u-swiper :list="list3" keyName="src" autoplay circular :height="180" 
			showTitle :radius="5" previousMargin="50" nextMargin="50" bgColor="#ffffff"></u-swiper>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<!-- 基础轮播图 -->
		<view>
			<u-swiper :list="list3" indicator indicatorMode="dot" autoplay circular 
			:height="180" :radius="0" keyName="src"></u-swiper>
		</view>
		<!-- #endif -->
		
		<!-- 消息滚动组件 -->
		<view class="my-2 px-2">
			<u-notice-bar :text="noticetext" direction="column" color="#1989fa" bgColor="#ecf5ff"
			fontSize="14" duration="4000" @click="openNotice"></u-notice-bar>
		</view>
		
		<!-- 底部tabbar -->
		<u-tabbar :value="tabbarValue" :safeAreaInsetBottom="true" :border="true"
		:zIndex="1" activeColor="#1989fa" inactiveColor="#7d7e80"
		:fixed="true" :placeholder="true"
		@change="changeTabbar">
			<u-tabbar-item text="首页" icon="home"  ></u-tabbar-item>
			<u-tabbar-item text="主营业务" icon="level"  :badge="9" @click="openurl('点击主营业务')"></u-tabbar-item>
			<u-tabbar-item text="工程案例" icon="list-dot" :dot="true" ></u-tabbar-item>
			<u-tabbar-item text="联系我们" icon="chat-fill"></u-tabbar-item>
		</u-tabbar>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbarValue:0,
				current:0,
				list3: [
					// {
					// 	src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					// 	poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					// 	type: 'video'
					// },
					{
						src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347846723_46195408.png',
						title: '规划设计',
						type: 'image'
					},
					{
						src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347904014_12078316.png',
						title: '施工建设',
						type: 'image'
					},
					{
						src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png',
						title: '电力设备销售',
						type: 'image'
					},
				],
				notices:[
					{
						titles:"我司顺利通过“质量、安全及职业健康安全管理体系",
						url:'xxx1'
					},
					{
						titles:"2022年8月2日到3日中电联（北京）认证中心委派2位审核专家对我司质量、安全及职业健康安全管理体系进行审",
						url:'xxx2'
					},
				], 
			}
		},
		onLoad() {
            
		},
		computed:{
			// 滚动消息内容
			noticetext(){
				let text = [];
				this.notices.forEach(e=> text.push(e.titles));
				return text;
			}
		},
		methods: {
			//底部tabbar切换
            changeTabbar(index){
				console.log(index);
				this.tabbarValue = index;
			},
			//点击底部tabbar某一项
			openurl(url){
				console.log(url);
			},
			//点击滚动消息	
			openNotice(index){
				console.log('点击滚动消息',this.notices[index]);
			}
		}
	}
</script>

<style>
	@import '/common/css/common.v1.css';
</style>
<style lang="scss">
    .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
</style>

# 四、主要栏目展示

<template>
	<view>
    ...
	<!-- 主要栏目展示 -->
		<view class="px-2">
			<u-row customStyle="margin-bottom:20rpx;">
				<u-col span="6">
					<view class="py-3 pr-2 pl-2 flex rounded-lg mr-1" 
					style="background-color: #eef7fe;">
						<view class="flex flex-1 flex-column">
							<view>
								<u--text size="16" text="关于我们" ></u--text>
							</view>
							<view class="mt-2">
								<text class="u-line-1 font-small" 
								style="color: #5c97e1;">ABOUT US</text>
							</view>
						</view>
						<view class="flex align-center" style="width: 45px;height: 45px;">
							<u-icon name="tags-fill" color="#5c97e1" size="42"></u-icon>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="py-3 pr-2 pl-2 flex rounded-lg ml-1" 
					style="background-color: #eef7fe;">
						<view class="flex flex-1 flex-column">
							<view>
								<u--text size="16" text="资讯中心" ></u--text>
							</view>
							<view class="mt-2">
								<text class="u-line-1 font-small" 
								style="color: #5c97e1;">NEWS CNETER</text>
							</view>
						</view>
						<view class="flex align-center" style="width: 45px;height: 45px;">
							<u-icon name="grid-fill" color="#5c97e1" size="42"></u-icon>
						</view>
					</view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom:20rpx;">
				<u-col span="6">
					<view class="py-3 pr-2 pl-2 flex rounded-lg mr-1" 
					style="background-color: #eef7fe;">
						<view class="flex flex-1 flex-column">
							<view>
								<u--text size="16" text="主营业务" ></u--text>
							</view>
							<view class="mt-2">
								<text class="u-line-1 font-small" 
								style="color: #5c97e1;">MAIN BUSINESS</text>
							</view>
						</view>
						<view class="flex align-center" style="width: 45px;height: 45px;">
							<u-icon name="level" color="#5c97e1" size="42"></u-icon>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="py-3 pr-2 pl-2 flex rounded-lg ml-1" style="background-color: #eef7fe;">
						<view class="flex flex-1 flex-column">
							<view>
								<u--text size="16" text="工程案例" ></u--text>
							</view>
							<view class="mt-2">
								<text class="u-line-1 font-small" 
								style="color: #5c97e1;">ENGINEERING CASE</text>
							</view>
						</view>
						<view class="flex align-center" style="width: 45px;height: 45px;">
							<u-icon name="share-fill" color="#5c97e1" size="42"></u-icon>
						</view>
					</view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom:20rpx;">
				<u-col span="6">
					<view class="py-3 pr-2 pl-2 flex rounded-lg mr-1" 
					style="background-color: #eef7fe;">
						<view class="flex flex-1 flex-column">
							<view>
								<u--text size="16" text="合作单位" ></u--text>
							</view>
							<view class="mt-2">
								<text class="u-line-1 font-small" 
								style="color: #5c97e1;">COOPERATION UNIT</text>
							</view>
						</view>
						<view class="flex align-center" style="width: 45px;height: 45px;">
							<u-icon name="thumb-up-fill" color="#5c97e1" size="42"></u-icon>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="py-3 pr-2 pl-2 flex rounded-lg ml-1" 
					style="background-color: #eef7fe;">
						<view class="flex flex-1 flex-column">
							<view>
								<u--text size="16" text="联系我们" ></u--text>
							</view>
							<view class="mt-2">
								<text class="u-line-1 font-small" 
								style="color: #5c97e1;">CONTACT US</text>
							</view>
						</view>
						<view class="flex align-center" style="width: 45px;height: 45px;">
							<u-icon name="server-fill" color="#5c97e1" size="42"></u-icon>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		
	...
    </view>
</template>

# 五、横向滚动【主营业务】展示

# ① 横向滚动示例

<template>
	<view>
    ...
	<view>
		<u-gap height="10" bgColor="#f8f8f8" marginBottom="10"></u-gap>
		<view class="px-2">
			<view class="mb-2">
				<u--text text="主营业务" type="info"></u--text>
			</view>
			<view>
				<u-scroll-list @right="right" @left="left">
					<view class="scroll-list" style="flex-direction: row;">
						<view
								class="scroll-list__goods-item"
								v-for="(item, index) in listscrollData"
								:key="index"
								:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
						>
							<image class="scroll-list__goods-item__image" :src="item.thumb"></image>
							<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
						</view>
						<view class="scroll-list__show-more">
							<text class="scroll-list__show-more__text">查看更多</text>
							<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
	</view>
	...
    </view>
</template>
<script>
	export default {
		data() {
			return {
                listscrollData: [
					{
						price: '230.5',
						thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					}, {
						price: '74.1',
						thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
					}, {
						price: '8457',
						thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
					}, {
						price: '1442',
						thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
					}, {
						price: '541',
						thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
					}, {
						price: '234',
						thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
					}, {
						price: '562',
						thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
					}, {
						price: '251.5',
						thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
				]
			}
		},
		methods: {
            //滚动列表组件
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			},
		}
	}
</script>
<style lang="scss">
.scroll-list {
	@include flex(column);

	&__goods-item {
		margin-right: 20px;
		@include flex(column);

		&__image {
			width: 60px;
			height: 60px;
			border-radius: 4px;
		}

		&__text {
			color: #f56c6c;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	&__show-more {
		background-color: #fff0f0;
		border-radius: 3px;
		padding: 3px 6px;
		@include flex(column);
		align-items: center;

		&__text {
			font-size: 12px;
			width: 12px;
			color: #f56c6c;
			line-height: 16px;
		}
	}
}
</style>

# ② 横向滚动【主营业务】

<template>
	<view>
    ...
	<!-- 横向滚动【主营业务】展示 -->
		<view>
			<u-gap height="10" bgColor="#f8f8f8" marginBottom="10"></u-gap>
			<view class="px-2">
				<view class="mb-2">
					<u--text text="主营业务" type="info"></u--text>
				</view>
				<view>
					<u-scroll-list @right="right" @left="left">
						<view class="scroll-list" style="flex-direction: row;">
							<view  class="scroll-list__goods-item"
							v-for="(item, index) in listscrollData" :key="index"
							:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
							@click.stop="openlistscroll(item)">
								<!-- <image class="scroll-list__goods-item__image" :src="item.thumb"></image> -->
								<u--image showLoading :src="item.src" width="180px" height="110px" 
								radius="5px" mode="widthFit">
									<template v-slot:loading>
									    <u-loading-icon color="red"></u-loading-icon>
									</template>
									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u--image>
								<text class="scroll-list__goods-item__text">{{ item.title }}</text>
							</view>
							<view class="scroll-list__show-more" @click="listscrollMore">
								<text class="scroll-list__show-more__text">查看更多</text>
								<u-icon name="arrow-leftward" color="#1989fa" size="12"></u-icon>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>
	...
    </view>
</template>
<script>
	export default {
		data() {
			return {
				listscrollData: [
					{
						src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347846723_46195408.png',
						title: '规划设计',
						type: 'image'
					},
					{
						src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347904014_12078316.png',
						title: '施工建设',
						type: 'image'
					},
					{
						src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png',
						title: '电力设备销售',
						type: 'image'
					},
				]
			}
		},
		methods: {
			//滚动列表组件
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			},
			//打开列表滚动展示更多
			openlistscroll(item){
				console.log('打开列表滚动',item);
			},
			//列表滚动展示更多
			listscrollMore(){
				console.log('列表滚动展示更多');
			}
		}
	}
</script>
<style lang="scss">
.scroll-list {
	@include flex(column);

	&__goods-item {
		margin-right: 20px;
		@include flex(column);

		&__image {
			width: 60px;
			height: 60px;
			border-radius: 4px;
		}

		&__text {
			color: #1989fa;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	&__show-more {
		background-color: #eef7fe;
		border-radius: 3px;
		padding: 3px 6px;
		@include flex(column);
		align-items: center;
		justify-content: space-between;

		&__text {
			font-size: 12px;
			width: 12px;
			color: #1989fa;
			line-height: 16px;
		}
	}
}
</style>

# 六、资讯中心【新闻中心】开发

先将官方提供的组件 uni-card 导入项目，然后进行使用。

<template>
	<view>
    ...
	  <!-- 资讯中心 -->
        <view>
			<u-gap height="10" bgColor="#f8f8f8" marginBottom="10"></u-gap>
			<view class="px-2">
				<view class="mb-2">
					<u--text text="资讯中心" type="info"></u--text>
				</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/20240522/1716347930629_87275382.png" 
								width="100%" showLoading radius="0px" mode="widthFix" height="160px">
								    <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">2022年8月2日到3日中电联（北京）认证中心委派2位审核专家对我司质量、安全及职业健康安全管理体系进行审</text>
								</view>
							</view>
						</template>
						<view class="p-2">
							<text class="u-line-3 text-light-muted font-sm">中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职</text>
						</view>
					</uni-card>
				</view>
				<view class="mb-3">
					<uni-card padding="0" spacing="0" margin="0" title="1个小时前发布"
					extra="浏览: 1万+">
						<template v-slot:cover>
							<view class="custom-cover">
								<!-- <image class="cover-image" mode="aspectFill" 
								src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347846723_46195408.png"> 
								</image>-->
								<u--image src="http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347846723_46195408.png" 
								width="100%" showLoading radius="0px" mode="widthFix" height="160px">
								    <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">睿晨电网建设工程有限公司主要从事电力工程，规划设计 变电站电力设备，高压试验设备，变电线路检测设备，自动化控制系统，在线监测系统，信息化集成， 实验仪器仪表等研制、生产、销售、技术、售后服务，公司的主要产品有各种电力测试的解决方案，耐电压试验系列， 调频串联谐振试验装置、电力设备的在线监测系统，冲击耐压、 水利水电信息化，无局放试验系列、油化测定，FS6检查系列等等，经营的产品广泛涉足工业自动化与城乡电网的建设、 改造和铁路、航天航空、高等院校、实验室、通信、环保、质检、医疗等领域。</text>
						</view>
					</uni-card>
				</view>
			</view>
		</view>
    ...
    </view>
</template>
<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>








# 【第三学期第1季课程】其它章节

# 章节1.课程介绍

# 章节2.开发前环境搭建

# 1. 安装开发工具

# 2. 安装插件并调试移动端页面

# 3. 调试安卓(Andriod)端手机app效果

# 4. 调试苹果(IOS)手机app效果

# 5. 调试微信小程序效果

# 6. 调试支付宝小程序效果

# 章节3.引入UI框架及进行全局配置

# 一、引入UI框架

# 二、项目配置

# 1、 底部导航栏

# ① 底部导航栏属性样式设置
# ② 底部导航栏事件

# 2、顶部导航栏设置

# 章节4.首页开发

# 一、swiper广告图

# ① 多种指示器形式样式展示

# ② 带标题的轮播图

# ③ 图片视频混合的轮播图

# ④ 卡片式轮播图

# 二、消息滚动通知

# 三、引入公共样式（css样式库）

# ① 公共样式（css样式库）详细代码及说明

# ② 引入公共样式替换之前写的行内样式

# 四、主要栏目展示

# 五、横向滚动【主营业务】展示

# ① 横向滚动示例

# ② 横向滚动【主营业务】

# 六、资讯中心【新闻中心】开发

# 章节5.其它界面开发

# 一、资讯中心【新闻中心】列表

# ① 导航栏部分

# ② 信息列表部分

# 二、信息详情页

# 三、联系我们页面

# ① 联系方式展示及初步使用表单组件提交数据验证

# ② 完成留言板界面和数据验证

# 四、工程案例页面

更新时间: 2024年12月16日星期一下午5点08分