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

素材