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

news2024/9/20 5:40:09

基于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>

素材

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

static的用法

static的用法

static一般用于修饰局部变量&#xff0c;全局变量&#xff0c;函数 1 static修饰局部变量 是因为改为static int a1;后&#xff0c;出了作用域&#xff0c;不会销毁a的值&#xff0c;想要理解其本质&#xff0c;首先先看一下这个图&#xff1a; static修饰局部变量时&#xf…
阅读更多...
每天一道大厂SQL题【Day32】按消息量给广东省qq打标记

每天一道大厂SQL题【Day32】按消息量给广东省qq打标记

文章目录 每天一道大厂SQL题【Day32】按消息量给广东省qq打标记每日语录第32题 需求三&#xff1a;按消息量给广东省qq打标记思路分析附表 答案获取加技术群讨论文末SQL小技巧 后记 每天一道大厂SQL题【Day32】按消息量给广东省qq打标记 大家好&#xff0c;我是Maynor。相信大…
阅读更多...
RabbitMQ系列-rabbitmq无法重新加入集群，启动失败的问题

RabbitMQ系列-rabbitmq无法重新加入集群，启动失败的问题

当前存在3个节点&#xff1a;rabbitmq5672、rabbitmq5673、rabbitmq5674 当rabbitmq5673节点掉线之后&#xff0c;重启失败 重启的时候5672节点报错如下&#xff1a; 解决方案 在集群中取消失败节点 rabbitmqctl forget_cluster_node rabbitrabbitmq5673删除失败节点5673的…
阅读更多...
工欲善其事必先利其器——IntelliJ IDEA神器使用技巧

工欲善其事必先利其器——IntelliJ IDEA神器使用技巧

1.IntelliJ IDEA神器使用技巧【时长2小时20分】 程序员每日都会花费数小时使用ide编写和调试代码&#xff0c;其中很多操作都是机械重复且频率非常高&#xff0c;本着"工欲善其事必先利其器"的精神&#xff0c;闷头写代码之外花点时间研究一下自己用的ide&#xff0…
阅读更多...
zookeeper启动（一）

zookeeper启动（一）

1.zookeeper启动入口 在zkServer.sh的启动命令中，我们可以找到zookeeper启动的关键类org.apache.zookeeper.server.quorum.QuorumPeerMain QuorumPeerMain#main 我们可以直接看org.apache.zookeeper.server.quorum.QuorumPeerMain中的main方法，从下面的main方法中，我们可以…
阅读更多...
JavaSE基础语法合集

JavaSE基础语法合集

随着不断学习&#xff0c;我们已经走完了JavaSE基础语法的所有内容&#xff0c;博主的单独语法篇共十二篇&#xff0c;感兴趣的也可以去看看&#xff0c;内容基本一致&#xff0c;目录是重新排布的&#xff0c;数组和方法都在初识Java章节。 适合&#xff1a;老手复习和新手从零…
阅读更多...
Ubuntu系统升级k8s节点的node节点遇到的问题

Ubuntu系统升级k8s节点的node节点遇到的问题

从1.23版本升级到1.28版本 node节点的是Ubuntu系统20.04的版本 Q1 node节点版本1.23升级1.28失败 解决办法&#xff1a; # 改为阿里云镜像 vim /etc/apt/sources.list.d/kubernetes.list# 新增 deb https://mirrors.aliyun.com/kubernetes/apt/ kubernetes-xenial main# 执…
阅读更多...
pdf处理命令合集

pdf处理命令合集

安装weasyprint用于生成pdf 单个文件合成多个pdf linux - Merge / convert multiple PDF files into one PDF - Stack Overflow
阅读更多...
深入解析Java中volatile关键字

深入解析Java中volatile关键字

前言 我们都听说过volatile关键字&#xff0c;也许大家都知道它在Java多线程编程编程中可以减少很多的线程安全问题&#xff0c;但是会用或者用好volatile关键字的开发者可能少之又少&#xff0c;包括我自己。通常在遇到同步问题时&#xff0c;首先想到的一定是加锁&#xff0…
阅读更多...
【AI基础】第二步：安装AI运行环境

【AI基础】第二步：安装AI运行环境

开局一张图&#xff1a; ​ 接下来按照从下往上的顺序来安装部署。 规则1 注意每个层级的安装版本&#xff0c;上层的版本由下层版本决定 比如CUDA的版本&#xff0c;需要看显卡安装了什么版本的驱动&#xff0c;然后CUDA的版本不能高于这个驱动的版本。 这个比较好理解&…
阅读更多...
520表白神器

520表白神器

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…
阅读更多...
Ripple：使用Wavelet Approximations来加速FHE的Programmable Bootstraps

Ripple：使用Wavelet Approximations来加速FHE的Programmable Bootstraps

1. 引言 University of Delaware和Nillion团队的 Charles Gouert、Mehmet Ugurbil、Dimitris Mouris、Miguel de Vega 和 Nektarios G. Tsoutsos&#xff0c;2024年论文《Ripple: Accelerating Programmable Bootstraps for FHE with Wavelet Approximations》&#xff0c;开源…
阅读更多...
如何理解与学习数学分析——第二部分——数学分析中的基本概念——第9章——可积性

如何理解与学习数学分析——第二部分——数学分析中的基本概念——第9章——可积性

第2 部分&#xff1a;数学分析中的基本概念 (Concepts in Analysis) 9. 可积性(Integrability) 本章讨论了可积性(integrability)的概念(它不同于积分过程)。研究了反导数(antiderivative&#xff0c;或称原函数)和函数图像下面积之间的关系&#xff0c;然后通过对面积的近似…
阅读更多...
使用Python绘制南丁格尔图（玫瑰图）

使用Python绘制南丁格尔图（玫瑰图）

使用Python绘制南丁格尔图&#xff08;玫瑰图&#xff09; 南丁格尔图效果代码 南丁格尔图 南丁格尔图&#xff08;Nightingale Rose Chart&#xff09;&#xff0c;也被称为玫瑰图或极区图&#xff0c;是一种特殊的圆形统计图&#xff0c;用于显示多个类别的数据。它是由弗洛…
阅读更多...
用蒙特卡罗积分法近似求解定积分的值及举例

用蒙特卡罗积分法近似求解定积分的值及举例

一、背景知识 1、连续随机变量的概率密度函数 对于连续型随机变量的概率密度函数&#xff08;PDF&#xff09;&#xff0c;其在整个定义域上的积分必须等于1。这是概率密度函数的一个基本属性&#xff0c;它确保了随机变量取任何值的概率之和等于1&#xff0c;符合概率论的公…
阅读更多...
Leetcode：电话号码的字母组合

Leetcode：电话号码的字母组合

题目链接&#xff1a;17. 电话号码的字母组合 - 力扣&#xff08;LeetCode&#xff09; 普通版本&#xff08;回溯&#xff09; class Solution { public:string tmp;//临时存放尾插内容vector<string> res;//将尾插好的字符串成组尾插给resvector<string> board{…
阅读更多...
Apache POI（使用Java读写Excel表格数据）

Apache POI（使用Java读写Excel表格数据）

1.Apache POI简介 Apache POI是一个开源的Java库&#xff0c;用于操作Microsoft Office格式的文件。它支持各种Office文档的读写功能&#xff0c;包括Word文档、Excel电子表格、PowerPoint演示文稿、Outlook电子邮件等。Apache POI提供了一组API&#xff0c;使得Java开发者能够…
阅读更多...
服务器遭遇UDP攻击时的应对与解决方案

服务器遭遇UDP攻击时的应对与解决方案

UDP攻击作为分布式拒绝服务(DDoS)攻击的一种常见形式&#xff0c;通过发送大量的UDP数据包淹没目标服务器&#xff0c;导致网络拥塞、服务中断。本文旨在提供一套实用的策略与技术手段&#xff0c;帮助您识别、缓解乃至防御UDP攻击&#xff0c;确保服务器稳定运行。我们将探讨监…
阅读更多...
LCTF 2018 bestphp‘s revenge

LCTF 2018 bestphp‘s revenge

考点:Soap原生类Session反序列化CRLF注入 <?php highlight_file(__FILE__); $b implode; call_user_func($_GET[f], $_POST); session_start(); if (isset($_GET[name])) { $_SESSION[name] $_GET[name]; } var_dump($_SESSION); $a array(reset($_…
阅读更多...
推荐低成本低功耗的纯数字现场可重构IC

推荐低成本低功耗的纯数字现场可重构IC

CPLD采用CMOS EPROM、EEPROM、快闪存储器和SRAM等编程技术&#xff0c;从而构成了高密度、高速度和低功耗的可编程逻辑器件。 RAMSUN提供的型号LS98003是通用可配置的数字逻辑芯片&#xff0c;有体积小、超低功耗和高可靠性等特点。客户可以根据自己的功能需求设计芯片&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023