基于Vue3的Uniapp实训项目|一家鲜花店

基于Vue的Uniapp实训指导项目

项目预览：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				
				"navigationStyle": "custom"
			}
		}
        ,{
            "path" : "pages/video/video",
            "style" :                                                                                    
            {
			"navigationStyle": "custom"
            }
            
        }
        ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
			"navigationStyle": "custom"
            }
            
        }
        ,{
            "path" : "pages/videoinfo/videoinfo",
            "style" :                                                                                    
            {
                
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/login/login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"tabBar": {
		"color": "#8a8a8a",
		"selectedColor": "#ff161a",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/首页.png",
				"selectedIconPath": "static/首页 (1).png",
				"text": "鲜花"
			},
			{
				"pagePath": "pages/video/video",
				"iconPath": "static/视频.png",
				"selectedIconPath": "static/视频 (1).png",
				"text": "视频"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "static/我的.png",
				"selectedIconPath": "static/我的(1).png",
				"text": "我的"
			}
		]
	}
}

index.vue

<template>
	<view>
		<view class="tab">
			<view class="tab_title">
					<view>
						<image style="width: 50rpx;height: 55rpx;" src="../../static/xh.png"></image>
					</view>
					<view>鲜花永远是平淡生活里温柔的光</view>
				
			</view>
		</view>
		<view class="three">
			<view class="three-s">
				为您更新了15条内容
			</view>
		</view>
		<view class="twos">
			<view class="twoss">
				24℃ 晴朗 济南 PM2.09
			</view>
			<view class="left">
				<input type="text" style="width: 180rpx;margin-right: 20rpx; font-size: 25rpx;"placeholder="搜索关键词" class="search_input"/>
			</view>
		</view>
		<view class="smart-padding-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item><image style="width: 100%; height: 100%;" src="../../static/h1.jpg"></image></swiper-item>
				<swiper-item><image style="width: 100%; height: 100%;" src="../../static/h2.jpg"></image></swiper-item>
				<swiper-item><image style="width: 100%; height: 100%;" src="../../static/h3.jpg"></image></swiper-item>
			</swiper>
		</view>
			<view class="d-three">
				<view class="d-threes">
					<view>
						<image src="../../static/mg3.jpg" style="width: 200rpx;height: 160rpx;"></image>
					</view>
					<view class="d-threess">玫瑰原产是济南平阴。在古时的汉语，“玫瑰”一词原意是指红色美玉。长久以来，玫瑰就象征着美丽和爱情。</view>
				</view>
				<view>
					<view class="threess">鲜花网 38评</view>
				</view>
			</view>
		<view class="d-three">
			<view class="d-threes">
				<view>
					<image style="width: 200rpx;height: 160rpx;" src="../../static/mg4.jpg"></image>
				</view>
				<view class="d-threess">满天星 初夏开花,花朵如豆,每朵5瓣,略有微香。可以作为药用植物,也可作为玫瑰的配衬用。</view>
			</view>
			<view>
				<view class="threess">鲜花网 58评</view>
			</view>
		</view>
		<view class="d-three">
			<view class="d-threes">
				<view>
					<image style="width: 200rpx;height: 160rpx;" src="../../static/xh1.jpg"></image>
				</view>
				<view class="d-threess">郁金香属长日照花卉，性喜向阳、避风，冬季温暖湿润，夏季凉爽干燥的气候。</view>
			</view>
			<view>
				<view class="threess">鲜花网 18评</view>
			</view>
		</view>
		<view class="d-three">
			<view>加微信交友群，喜欢就聊，找喜欢的人</view>
			<view class="d-threes">
				<view class="a">
					<image 
					style="width: 200rpx;height: 160rpx;" src="../../static/xh2.jpg"></image>
				</view>
				<view class="a">
					<image 
					style="width: 200rpx;height: 160rpx;" src="../../static/xh3.jpg"></image>
				</view>
				<view class="a">
					<image 
					style="width: 200rpx;height: 160rpx;" src="../../static/bbt1.jpg"></image>
				</view>
			</view>
			<view class="threess">广告 我主良缘文化</view>
		</view>
		<view class="d-three">
			<view class="d-threes">
				<view>
					<image style="width: 200rpx;height: 160rpx;" src="../../static/bbt2.jpg"></image>
				</view>
				<view class="d-threess">碎冰蓝是后期人工染成的，不是自然形成的，较为罕见。碎冰蓝玫瑰有着无价之宝的含义。</view>
			</view>
			<view>
				<view class="threess">鲜花网 8评</view>
			</view>
		</view>
		
	</view>
</template>

<script> 
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		
		methods: {

		}
	}
</script>

<style>
		.search{
			display: flex;
			flex-direction: row;
		}
		
		.two{
			margin: 0rpx 40rpx 25rpx 30rpx;
			color: #ffffff;
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
		}
		.twos{
			color: #ffffff;
			display: flex;
			background-color: #dda8bb;
			margin-top: -10rpx;
			width: 100%;
			justify-content: space-between;
			height: 70rpx;
		}
		
		.twoss{
			margin-left: 20rpx;
		}
		
		.reds{
			color: #dd524d;
			height: 40rpx;
		}
		
		.xw-three{}
		
		.three{
			width: 100%;
			height: 120rpx;
			background-color: #dda8bb;
		}
		
		.three-s{
			color: #ffffff;
		}
		
		.d-three{
			border-bottom: 1rpx solid #ccd0d9;
			margin: 20rpx 20rpx 20rpx 20rpx;
		}
		.d-threes{
			display: flex;
			flex-direction: row;
		}
		a{
			margin: 20rpx 10rpx 10rpx 20rpx;
		}
		.d-threess{
			margin-left: 30rpx;
		}
		.threes{
			display: flex;
			flex-direction: row;
			margin: 5rpx 10rpx 10rpx 10rpx;
			font-size: 25rpx;
			color: #808080;
		}
		.j{
			margin-right: 25rpx;
		}
		.threess{
			margin-bottom: 20rpx;
			font-size: 25rpx;
			color: #808080;
		}
		.search .left{
			flex: 1;
			margin-right: 70rpx;
			height: 10rpx;
		}
		.search .right{
			width: 120rpx;
		}
		.search_input{
			background-color: #f8f8f8;
			border-radius: 40rpx;
			padding: 5rpx 30rpx 6rpx 30rpx;
			margin-right: 1rpx;
		}
		.search_img{
			height: 48rpx;
			width: 48rpx;
		}
		.tab_title view{
			font-size: 35rpx;
			display: inline-block;
			margin-left: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #ffffff;
		}
		.tab{
			background-color: #dda8bb;
			height: 100rpx;
			position: fixed;
			z-index: 1;
			left: 0;
			right: 0;
			width: 100%;
			margin-top: 0rpx;
		}
		.zd{
			color: #Dd524d;
		}
		.scroll_x{
		
			height: 60rpx;
			width: 100%;
			white-space: nowrap;
		}
		
		scroll-view::-webkit-scrollbar{
			display: none;
			width: 0;
			height: 0;
			color: transparent;
		}
		.news_list{
			margin: 200rpx 25rpx 25rpx 25rpx;
			position: absolute;
			padding-bottom: calc(var(--window-bottom));
			width: 100%;
		}
		.nwes_item{
			height: 150rpx;
			border-bottom: 1rpx solid #c8c7cc;
			display: flew;
			flex-direction: row;
			margin-bottom: 20rpx;
		}
		.news_list image{
			width: 180rpx;
			height: 140rpx;
			margin-right: 30rpx;
		}
		.news_list .title{
			font-size: 35rpx;
		}
		.news_list .time{
			color: #c0c0c0;
			font-size: 30rpx;
			margin-top: 15rpx;
		}
</style>

video.vue

<template>
	<view>
		<view class="items">
			<view class="item">
				<view class="item-xs">推荐</view>
				<view class="item-x">玫瑰</view>
				<view class="item-x">满天星</view>
				<view class="item-x">郁金香</view>
				<view class="item-x">碎冰蓝</view>
				<view class="item-x">抱抱桶</view>
			</view>
		</view>
		<view class="item-ss"></view>
		<!-- 
			鲜花视频网址: https://www.2amok.com/videoText/314342.html
		 
		 -->
		<view class="sp">
			<navigator url="../videoinfo/videoinfo">
				<view class="x">玫瑰原产是中国。在古时的汉语，“玫瑰”一词原意是指红色美玉。长久以来，玫瑰就象征着美丽和爱情。</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;" src="https://view.2amok.com/20200526/71a05ddcce9945236e37c9762fb34a10.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../static/tx.jpg"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">玫瑰</view>
					<view class="wenzizf" style="color: #999999; margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx; color: #dd524d; font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		
		<view class="sp">
			
				<view class="x">满天星 初夏开花,花朵如豆,每朵5瓣,略有微香。可以作为药用植物,也可作为玫瑰的配衬用。</view>
		
			<video class="y" style="width: 100%;height: 400rpx;" src="https://view.2amok.com/20210723/96447bef3a49daa9e8a09c1cc026521f.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../static/tx.jpg"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">满天星</view>
					<view class="wenzizf" style="color: #999999; margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx; color: #dd524d; font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		
		<view class="sp">
			
				<view class="x">郁金香属长日照花卉，性喜向阳、避风，冬季温暖湿润，夏季凉爽干燥的气候。</view>
			<video class="y" style="width: 100%;height: 400rpx;" src="https://view.2amok.com/20220909/a7aedfccc4c880d4f99b178654cf689b.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../static/tx.jpg"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">郁金香</view>
					<view class="wenzizf" style="color: #999999; margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx; color: #dd524d; font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		
		<view class="sp">
	
				<view class="x">碎冰蓝是后期人工染成的，不是自然形成的，较为罕见。碎冰蓝玫瑰有着无价之宝的含义。</view>

			<video class="y" style="width: 100%;height: 400rpx;" src="https://view.2amok.com/20220909/a7aedfccc4c880d4f99b178654cf689b.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../static/tx.jpg"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">碎冰蓝</view>
					<view class="wenzizf" style="color: #999999; margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx; color: #dd524d; font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../static/xh.png"></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../static/xh.png"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.items{
	background-color: #ffffff;
	z-index: 1;
	width: 100%;
	top: 90rpx;
}
.item{
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	margin: 5rpx 10rpx 20rpx 10rpx;
	font-size: 40rpx;
	color: #333333;
	margin-top: 50rpx;
	margin-bottom: -50rpx;
}
.item-ss{
	width: 100%;
	height: 60rpx;
}
.tab_title view{
	display: inline-block;
	margin-left: 30rpx;
	line-height: 30rpx;
	color: #ffffff;
}
.dibu{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 30rpx;
	margin-bottom: 20rpx;
}
.wenzi{
	display: flex;
	flex-direction: row;
}
.tupian{
	display: flex;
	flex-direction: row;
}
.tupiandx{
	margin-left: 20rpx;
}
.x{
	margin-top: 30rpx;
	margin-bottom: 30rpx;
}
.item-xs{
	color: #dd524d;
	font-weight: bold;
}
.a{
	margin-right: 120rpx;
	height: 50rpx;
}
.ap image{
	width: 250rpx;
	height: 100rpx;
}
.ap{
	border-radius: 10rpx;
	width: 250rpx;
	height: 100rpx;
	overflow: hidden;
	margin: auto;
}
.b{

}
.scroll_x{
	height: 50rpx;
	width: 100%;
	white-space: nowrap;
}
.item{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	color: #333333;
	background-color: #ffffff;
	border-bottom: 1rpx solid #c8c7cc;
}
.tab_title{
	display: inline-block;
	margin-left: 10rpx;
	height: 80rpx;
	line-height: 70rpx;
	color: #333333;
	background-color: #ffffff;
	border-bottom: 1rpx solid #c8c7cc;
}
.tab-x{
	color: #333333;
	background-color: #ffffff;
}
.scroll_x{
	height: 60rpx;
	width: 100%;
	white-space: nowrap;
}
.gray{
	color: #c8c7cc;
}
.gray1{
	color: #dd524d;
}
.hd{
	display: inline-block;
}
.tab{
	background-color: #dd524d;
}
.shgd{
	position: fixed;
	position: absolute;
	z-index: 1;
}
scroll-view::-webkit-scrollbar{
		display: none;
		width: 0;
		height: 0;
		color: transparent;
}
.sp{
	border-bottom: 1rpx solid #e5eaf3;
	margin: 10rpx 10rpx 20rpx 20rpx;
}
.reg-rigth{
	color: #dd524d;
	margin-right: 10rpx;
	padding-left: 10rpx;
}
.z{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 30rpx;
	margin-top: 20rpx;
	height: 70rpx;
}
.zs{
	display: flex;
}
.zl{
	margin-bottom: 10rpx;
	margin-right: 300rpx;
	margin-top: 20rpx;
}

.z-h{
	height: 60rpx;
	margin-right: 10rpx;
	display: flex;
	flex-direction: row;
	font-size: 35rpx;
}
.z-z{
	font-size: 30rp;
	color: #c8c7cc;
}
.z-zl{
	font-size: 30rpx;
	color: #c8c7cc;
	margin: 20rpx;
}
.z-z2{
	font-size: 30rpx;
	color: #c8c7cc;
	margin: 20rpx;
}
.y{
	src: ;
	margin: 0rpx;
	flex: 1;
}
</style>

videoinfo.vue

<template>
	<view>
		<view class="smart-page-head"></view>
		<view>
			<video class="checkbox-item" style="width: 100%;height: 400rpx;" src="https://view.2amok.com/20210723/96447bef3a49daa9e8a09c1cc026521f.mp4"></video>
		</view>
		<view class="spsy"></view>
		
		<view class="sp">
			<view class="b">玫瑰</view>
			<view class="z">
				<view class="z-z">1.0万次播放</view>
				<view class="z-z">
					<image style="width: 30rpx;height: 30rpx;" src="../../static/赞.png"></image>3
				</view>
			</view>
			
			<view class="z">
				<view>
					<image style="width: 80rpx;height: 80rpx;" src="../../static/tx.jpg"></image>
				</view>
				<view click="z-h">
					<view>hheee</view>
					<view class="z-z">13-14</view>
				</view>
				<view class="reg-rigth">+关注</view>
			</view>
		</view>
		
		<view class="item">
			<view>为你推荐</view>
			
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="../../static/xh1.jpg"></image>
				</view>
				<view>
					<view class="e-rigth">玫瑰原产是中国。在古时的汉语，“玫瑰”一词原意是指红色美玉。长久以来，玫瑰就象征着美丽和爱情。</view>
					<view class="z">
						<view class="z-z1">玫瑰花</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="../../static/xh2.jpg"></image>
				</view>
				<view>
					<view class="e-rigth">满天星 初夏开花,花朵如豆,每朵5瓣,略有微香。可以作为药用植物,也可作为玫瑰的配衬用。</view>
					<view class="z">
						<view class="z-z1">满天星</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="../../static/xh3.jpg"></image>
				</view>
				<view>
					<view class="e-rigth">郁金香属长日照花卉，性喜向阳、避风，冬季温暖湿润，夏季凉爽干燥的气候。</view>
					<view class="z">
						<view class="z-z1">郁金香</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="../../static/bbt3.jpg"></image>
				</view>
				<view>
					<view class="e-rigth">碎冰蓝是后期人工染成的，不是自然形成的，较为罕见。碎冰蓝玫瑰有着无价之宝的含义。</view>
					<view class="z">
						<view class="z-z1">碎冰蓝</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="color: #c5c5c5;margin-bottom: 30rpx;margin-left: 20rpx;">
			热门评论
			</view>
			
			<view class="pl">
				<view>
					<image style="width: 80rpx;height: 80rpx;margin-left: 20rpx;" src="/static/tx.jpg"></image>
				</view>
				<view class="lp">
					<view class="pll">
						<view>
							<view class="zt1">狐友879303</view>
							<view class="sj">
								<view class="sjs">1小时前</view>
								<view class="sjs">广西桂林市</view>
							</view>
						</view>
						<view class="pl">
							<view class="plll">3</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/tx.jpg"></image>
							</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/tx.jpg"></image>
							</view>
						</view>
					</view>
					<view class="pll">保命要紧，何机再起</view>
				</view>
			</view>
			
			<view class="pl">
				<view>
					<image style="width: 80rpx;height: 80rpx;margin-left: 20rpx;" src="../../static/tx.jpg"></image>
				</view>
				<view class="lp">
					<view class="pll">
						<view>
							<view class="zt1">网友872503</view>
							<view class="sj">
								<view class="sjs">2小时前</view>
								<view class="sjs">广西贵港市</view>
							</view>
						</view>
						<view class="pl">
							<view class="plll">7</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/tx.jpg"></image>
							</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/tx.jpg"></image>
							</view>
						</view>
					</view>
					<view class="pll">微笑生活，勇敢面对</view>
				</view>
			</view>
			
			<view class="pl">
				<view>
					<image style="width: 80rpx;height: 80rpx;margin-left: 20rpx;" src="../../static/tx.jpg"></image>
				</view>
				<view class="lp">
					<view class="pll">
						<view>
							<view class="zt1">平安379373</view>
							<view class="sj">
								<view class="sjs">3小时前</view>
								<view class="sjs">广西河池市</view>
							</view>
						</view>
						<view class="pl">
							<view class="plll">1</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/tx.jpg"></image>
							</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/tx.jpg"></image>
							</view>
						</view>
					</view>
					<view class="pll">真看不懂，理解不了</view>
				</view>
			</view>
			
			<view class="pl">
				<view>
					<image style="width: 80rpx;height: 80rpx;margin-left: 20rpx;" src="../../static/tx.jpg"></image>
				</view>
				<view class="lp">
					<view class="pll">
						<view>
							<view class="zt1">郊友896903</view>
							<view class="sj">
								<view class="sjs">5小时前</view>
								<view class="sjs">广西柳州市</view>
							</view>
						</view>
						<view class="pl">
							<view class="plll">9</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/tx.jpg"></image>
							</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/tx.jpg"></image>
							</view>
						</view>
					</view>
					<view class="pll">不应该，应该如何面对</view>
				</view>
			</view>
			
			<view class="xhx"></view>
			<view class="jz">已加载全部</view>
			<view class="xhxx"></view>
			
			<view class="zdb">
				<view>
					<image style="width: 40rpx;height: 40rpx;" src="../../static/返回.png"></image>
				</view>
				<view class="left">
					<input type="text" style="width: 180rpx;margin-right: 20rpx;font-size: 25rpx;"placeholder="我来说两句"/>
				</view>
				<view class="jl">
					<image style="width: 30rpx;height: 30rpx;" src="../../static/短信.png"></image>
				</view>
				<view class="jl">
					<image style="width: 40rpx;height: 40rpx;" src="../../static/收藏.png"></image>
				</view>
				<view class="jl">
					<image style="width: 40rpx;height: 40rpx;" src="../../static/分享.png"></image>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.item{
	margin: 20rpx 20rpx 20rpx 20rpx;
}
.spsy{
	width: 100%;
	height: 400rpx;
}
.checkbox-item{
	position: fixed;
	top: 85rpx;
	z-index: 1;
}
.sp{
	margin: 20rpx;
	border-bottom: 1rpx solid #999999;
}
.b{
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	font-size: 45rpx;
}
.reg-rigth{
	background: #dd524d;
	height: 50rpx;
	border-radius: 50rpx;
	color: #ffffff;
	width: 140rpx;
	text-align: center;
}
.c{
	display: flex;
	flex-direction: row;
}
.d{
	display: flex;
	flex-direction: row;
	border-bottom: 1rpx solid #d0d0d0;
}
.z{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 30rpx;
}
.z-h{
	margin-right: 210rpx;
}
.z-zl{
	font-size: 30rpx;
	color: #c8c7cc;
	margin: 20rpx;
}
.z-z2{
	font-size: 30rpx;
	color: c8c7cc;
	margin: 20rpx;
}
.z-z{
	font-size: 30rpx;
	color: c8c7cc;
}
.e-item{
	display: flex;
	flex-direction: row;
}
.e-rigth{
	margin: 20rpx;
	margin-top: 40rpx;
}
.e{
	margin-top: 30rpx;
}
.pl{
	display: flex;
	flex-direction: row;
	margin-right: -280rpx;
	margin-bottom: 40rpx;
}
.lp{
	margin-left: -30rpx;
}
.pll{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-left: 60rpx;
}
.plll{
	margin-right: 50rpx;
}
.xhx{
	border-bottom: 1rpx solid #c0c0c0;
	margin: 0rpx 20rpx 20rpx 100rpx;
}
.xhxx{
	border-bottom: 1rpx solid #d5d5d5;
	margin: 0rpx 20rpx 20rpx 10rpx;
	margin-bottom: 40rpx;
}
.jz{
	color: #c0c0c0;
	margin-left: 120rpx;
	margin-top: 80rpx;
}
.zdb{
	display: flex;
	flex-direction: row;
	background-color: #ffffff;
	width: 100%;
	height: 60rpx;
	position: fixed;
	bottom: 0rpx;
}
.left{
	height: 10rpx;
	margin-left: 20rpx;
}
.search_input{
	background-color: #f8f8f8;
	border-radius: 40rpx;
	padding: 5rpx 30rpx 6rpx 30rpx;
	margin-right: 1rpx;
}
.jl{
	margin-left: 80rpx;
}
.zt1{
	font-size: 30rpx;
	color: #007aff;
	margin-top: 10rpx;
}
.zdb{
	display: flex;
	flex-direction: row;
}
.left{
	height: 10rpx;
	margin-left: 20rpx;
}
.search_input{
	background-color: #f8f8f8;
	border-radius: 40rpx;
	padding: 5rpx 30rpx 6rpx 30rpx;
	margin-right: 1rpx;
}
.jl{
	margin-left: 90rpx;
}
</style>

my.vue

<template>
	<view>
		<view class="dd">
			<view class="item1">
				<image class="tx" style="width: 130rpx;height: 130rpx;" src="../../static/tx.jpg"></image>
				<view class="item2">
					<view class="item3">HI~欢迎回来</view>
					<view class="item4" @tap="gotoLogin"><text class="itemz">登录</text></view>
				</view>
			</view>
			
			<view class="er1">
				<view class="er2">关注3</view>
				<view class="er3">|</view>
				<view class="er4">话题0</view>
			</view>
		</view>
		
		<view class="item-dj">
			<view>
				<navigator url="../topic/topic">
					<view class="item-left">
						<image class="menpiao" src="../../static/收藏3.png"></image>
					</view>
					<view class="item-left">收藏</view>
				</navigator>
			</view>
			
			<view>
				<navigator url="../topic/topic.vue">
					<view class="item-left">
						<image class="menpiao" src="../../static/历史.png"></image>
					</view>
					<view class="item-left">历史</view>
				</navigator>
			</view>
			
			<view>
				<navigator url="../topic/topic.vue">
					<view class="item-left">
						<image class="menpiao" src="../../static/设置.png"></image>
					</view>
					<view class="item-left">设置</view>
				</navigator>
			</view>
		</view>
		
		<view>
			<image style="width: 100%; height: 90rpx;" ></image>
		</view>
		
		<view class="button">
			<image class="buttons" style="width: 100%; height: 300rpx;" src="../../static/h3.jpg"></image>
			<view class="button"><text class="hh">已有</text>385,893<text class="hh">人</text></view>
			<view class="button"><text class="hh">在这里发布身边的新鲜事</text></view>
			<view class="reg-rigth">我也要发布</view>
		</view>
		
		<view class="button">
			<view class="buttonx">先去逛逛<image class="buttony" style="width: 35rpx;height: 35rpx;"></image></view>
		</view>
		
		<view class="zh"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			gotoLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style>
.dd{
	padding-bottom: 0rpx;
	background-image: url("../../static/bg.jpeg");
	background-position: center;
	margin-top: -30rpx;
	height: 280rpx;
}
.tx{
	margin-top: 10rpx;
}
.item1{
	display: flex;
	margin-top: 30rpx;
	margin-left: 20rpx;
}
.item2{
	margin-top: 15rpx;
}
.item3{
	margin-left: 20rpx;
	color: #ffffff;
	font-weight: bold;
	margin-top: 10rpx;
}
.item4{
	border-radius: 20rpx;
	color: #ffffff;
	width: 150rpx;
	height: 50rpx;
	background-color: #dd524d;
	margin-left: 20rpx;
	margin-top: 10rpx;
}
.itemz{
	color: #999999;
	margin-left: 45rpx;
}
.er1{
	margin-top: 80rpx;
	margin-left: 80rpx;
	opacity: 0.5;
}
.er2{
	margin-left: 50rpx;
	color: #ffffff;
}
.er3{
	margin-left: 300rpx;
	margin-top: -50rpx;
	color: #ffffff;
}
.er4{
	margin-left: 450rpx;
	margin-top: -50rpx;
	color: #ffffff;
}
.smart{}

.item-dj{
	display: flex;
	flex-direction: row;
	-webkit-box-flex: 1;
	flex: 1;
	border-bottom: 1rpx solid #e6e6e6;
	margin-top: -50rpx;
	margin-bottom: 5rpx;
}
.item-left{
	height: 10rpx;
	line-height: 71rpx;
	width: 50%;
	text-align: center;
	margin: 90rpx;
	font-size: 20rpx;
	padding-bottom: 1rpx;
	margin-top: 20rpx;
}

.menpiao{
	width: 45rpx;
	height: 45rpx;
	text-align: center;
	margin-top: 70rpx;
}
.menpiao1{
	width: 45rpx;
	height: 45rpx;
	text-align: center;
	margin-top: 70rpx;
}
.menpiao2{
	width: 40rpx;
	height: 40rpx;
	text-align: center;
	margin-top: 70rpx;
}
.buttons{
	margin-top: 0rpx;
}
.button{
	text-align: center;
}
.reg-rigth{
	border: 1px solid #dd524d;
	width: 250rpx;
	height: 65rpx;
	text-align: center;
	color: #dd524d;
	border-radius: 40rpx;
	margin-bottom: 20rpx;
	line-height: 70rpx;
	margin-top: 40rpx;
	margin-left: 240rpx;
}
.buttonx{
	color: #999999;
}
.hh{
	color: #999999;
}
.zh{
	height: 200rpx;
}
</style>

素材

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/674908.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

微信小程序蓝牙连接部分Android14调用wx.setBLEMTU协商低功耗最大传输单元失败解决方案（部分安卓14设置超过23就会报错）

微信小程序蓝牙连接部分Android14调用wx.setBLEMTU协商低功耗最大传输单元失败解决方案（部分安卓14设置超过23就会报错）

1.解决方案的核心内容&#xff1a;第一次设置失败不要管&#xff0c;在complate函数里面继续往下连接&#xff0c;然后设置一个定时器每1秒钟在重新设置一次&#xff0c;肯定会成功的&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&am…
阅读更多...
PS系统教程09

PS系统教程09

修复照片 修饰工具 污点修复画笔工具&#xff08;J&#xff09; 主要作用&#xff1a;去除一些污点或者不需要的 【&#xff1a;缩小】&#xff1a;放大 目标&#xff1a;去掉这两个点 修复画笔工具 也就是说我们要有取样点 选择修复画笔工具按住Alt键吸取周边相近颜色松开单机…
阅读更多...
手把手教你使用O2OA(翱途v9)开发应用平台（1）-平台初始化

手把手教你使用O2OA(翱途v9)开发应用平台（1）-平台初始化

今天我们就来搭建O2OA服务&#xff0c;并初始化基础数据。 服务器安装启动 获取O2OA O2OA平台以及其所有源码&#xff0c;都是可以免费获取的&#xff0c;要获取可运行的O2OA平台&#xff0c;有三种方式&#xff1a; 1、容器化部署 2、从官网下载可运行版本 3、下载源码&…
阅读更多...
YOLOv5改进 | 主干网络 | 将主干网络替换为轻量化的ShuffleNetv2【原理 + 完整代码】

YOLOv5改进 | 主干网络 | 将主干网络替换为轻量化的ShuffleNetv2【原理 + 完整代码】

&#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 目标检测是计算机视觉中一个重要的下游任务。对于边缘盒子的计算平台来说&#xff0c;一个大型模型很难实现实时检测的要求。基于一系列消融…
阅读更多...
直流电机工作原理与控制电路解析

直流电机工作原理与控制电路解析

工作原理&#xff1a; 洛伦兹力原理&#xff1a; 直流电机中&#xff0c;定子上通电产生磁场&#xff0c;而转子内导体通电后在磁场中受到洛伦兹力的作用&#xff0c;使其产生转动力矩。 转子内的导体通电后会在磁场中受到力的作用&#xff0c;根据洛伦兹力的方向规则&#…
阅读更多...
【metricbeat】通过metricbeat采集prometheus指标

【metricbeat】通过metricbeat采集prometheus指标

通过metricbeat采集prometheus指标 通过beat采集prometheus内的单个指标。 低版本beat只能全量 环境 # 低版本metricbeat只能全量采集 软件版本&#xff1a;metricbeat8.11.1 解压 tar zxvf metricbeat-8.11.1-linux-x86_64.tar.gz -C /usr/local配置 首先&#xff0c;修改…
阅读更多...
数据库索引的理解

数据库索引的理解

目录 1.索引是什么&#xff0c;解决了什么问题 2.索引付出了什么代价 3.如何使用sql索引&#xff0c;有何注意事项 普通索引&#xff1a; 唯一索引&#xff1a; 主键索引(Primary Key Index)&#xff1a; 删除索引: 创建主键索引的基本语法: 4.索引背后的数据结构 1.索…
阅读更多...
Spring Boot 集成 zxing 生成条形码与二维码

Spring Boot 集成 zxing 生成条形码与二维码

前面我们知道了怎么通过 使用 zxing 生成二维码以及条形码&#xff0c; 由于我们现在都是 web 端的项目了&#xff0c;那么我们看下怎么使用 Spring Boot 集成然后返回给前端展示&#xff1a; 工程源码 对应的工程源码我放到了这里&#xff1a;github源码路径&#xff0c;点击…
阅读更多...
80V高耐压低静态线性稳压器/LDO，Vout 1v-65v 3.3V及5V方案最佳选择

80V高耐压低静态线性稳压器/LDO，Vout 1v-65v 3.3V及5V方案最佳选择

概述 PC93XX系列专为动力而设计-敏感应用程序。它包括一个精度第二个高压输入级&#xff0c;超低功率 偏置电流分支&#xff0c;并产生超低功率和低压差线性调节器。PC93XX通过输入电压工作VOUT1V至65V&#xff0c;仅消耗1.8μA的静态电流&#xff0c;并提供1%的初始精度和低…
阅读更多...
Maven项目打包成jar项目后运行报错误: 找不到或无法加载主类 Main.Main 和 jar中没有主清单属性解决方案

Maven项目打包成jar项目后运行报错误: 找不到或无法加载主类 Main.Main 和 jar中没有主清单属性解决方案

已经用maven工程的package功能进行了打包 找不到或无法加载主类 Main.Main 规定主类 主要在maven的配置文件当中 这边一定要绑定自己的启动类 jar中没有主清单属性 删掉这一行就行哈 正确的插件代码 <plugin><groupId>org.springframework.boot</groupId&…
阅读更多...
孩子出生后为什么要做听力筛查？

孩子出生后为什么要做听力筛查？

孩子出生后为什么要做听力筛查&#xff1f; 新生儿听力筛查&#xff0c;就是对所有新生儿在尽早的时间&#xff08;出生48小时后&#xff09;进行系统的听力筛查测试。据相关文献报道&#xff0c;在我国&#xff0c;正常分娩的新生儿听力障碍的发生率约为0.1&#xff5e;0.3%&a…
阅读更多...
gomail发送邮件的参数如何设置？如何使用？

gomail发送邮件的参数如何设置？如何使用？

gomail发送邮件的认证方式有哪些&#xff1f;怎么设置邮件发信&#xff1f; Gomail是一个常用的Go语言邮件发送库&#xff0c;它提供了简单易用的接口&#xff0c;使得邮件发送变得非常方便。AokSend将详细介绍如何设置gomail发送邮件的参数&#xff0c;帮助开发者更好地理解和…
阅读更多...
Window11开放端口

Window11开放端口

&#xff08;1&#xff09;打开控制面板&#xff0c;进入【控制面板\系统和安全\Windows Defender 防火墙】 &#xff08;2&#xff09;点击左侧菜单【高级设置】&#xff0c;进入防火墙设置页面 &#xff08;3&#xff09;根据需要选择【入站规则】或者【出站规则】&#xff…
阅读更多...
《猎杀：对决》是适合什么样的人玩 Mac电脑怎么玩《猎杀：对决》

《猎杀：对决》是适合什么样的人玩 Mac电脑怎么玩《猎杀：对决》

《猎杀&#xff1a;对决》是一款集合了生存、竞技和恐怖元素的多人在线游戏&#xff0c;自推出以来受到了广大玩家的热爱。本文将详细探讨《猎杀&#xff1a;对决》适合什么样的人玩以及Mac电脑怎么玩《猎杀&#xff1a;对决》。本文将一一解析&#xff0c;帮助你了解这款游戏是…
阅读更多...
全球家纺热潮持续！有哪些家纺爆款类目推荐入驻沃尔玛？

全球家纺热潮持续！有哪些家纺爆款类目推荐入驻沃尔玛？

在全球家纺热潮中&#xff0c;选择沃尔玛家纺爆款类目入驻是明智之举。沃尔玛作为全球零售巨头&#xff0c;拥有庞大的消费者群体和销售渠道&#xff0c;对家纺产品销售具有显著优势。 ​以下是一些推荐的家纺爆款类目&#xff0c;供您参考&#xff1a; 一、高品质床品套件 床…
阅读更多...
迪普微震撼发布：全新Xilinx Kintex-7 XC7K325 FPGA开发板！

迪普微震撼发布：全新Xilinx Kintex-7 XC7K325 FPGA开发板！

01 产品概述 本公司基于Xilinx Kintex-7系列的开发平台采用核心板加扩展主板的方式&#xff0c;方便用户对相关板卡的二次开发利用。 其中&#xff0c;核心板包含一片芯片XC7K325T&#xff0c;使用FFG900封装&#xff0c;外挂4片512MB的高速DDR3芯片和1片256Mb的QSPI Flash芯…
阅读更多...
mysql 如果有按照时间范围查询结果

mysql 如果有按照时间范围查询结果

1.前端传2024-06-21 到我们xml sql 文件中默认实际是 2024-06-21 00:00:00 <if test"dto.startTime ! null">and ps.created_at > #{dto.startTime}</if><if test"dto.endTime ! null">and ps.created_at < #{dto.endTime}</if…
阅读更多...
(2) qml诞生的原因 和Qt Creator开发环境的介绍

(2) qml诞生的原因 和Qt Creator开发环境的介绍

文章目录 qml诞生原因Qt Quick应⽤程序Qt Creator环境1、MSVC2、MinGWMSVC的优缺点MinGW的优缺点 最后的选择延伸阅读 一些常用的快捷键统一格式化代码统一qml 语言的格式Locator 定位器帮助 qml诞生原因 可以在Qt5中开发的不同类型的经典应⽤程序。桌⾯应⽤程 序正在发⽣着改…
阅读更多...
如何制作不限扫描次数的视频二维码？1分钟教程

如何制作不限扫描次数的视频二维码？1分钟教程

不可否认的是&#xff0c;视频二维码正在各行各业发挥重要作用。不论是在线上宣传、线下活动&#xff0c;还是产品包装、展览展会上&#xff0c;只需要扫描视频二维码&#xff0c;就能在手机端获得专业的视频教程、查看品牌宣传视频、了解活动流程、快速获取关键信息等&#xf…
阅读更多...
AI精选付费资料包【37GB】

AI精选付费资料包【37GB】

课程介绍 一、人工智能论文合集 二、AI必读经典书籍 三、超详细人工智能学习大纲 四、机器学习基础算法教程 五、深度学习神经网络基础教程 六、计算机视觉实战项目 课程获取 资料&#xff1a;AI精选付费资料包&#xff08;37.4GB&#xff09;获取&#xff1a;扫码关注公z号…
阅读更多...
最新文章

Copyright @ 2022~2023