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

基于Vue的Uniapp实训指导项目

项目预览：

在这里插入图片描述

pages.json

{
"pages": [ //pages数组中第一项表示应用启动页，参考：http://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>

<view class="sp">
<navigator url="../videoinfo/videoinfo">
<view class="x">玫瑰原产是中国。在古时的汉语，“玫瑰”一词原意是指红色美玉。长久以来，玫瑰就象征着美丽和爱情。</view>
</navigator>
<video class="y" style="width: 100%;height: 400rpx;" src="http://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="http://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="http://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="http://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="http://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>

素材