备案控制台
开发者社区 开发与运维 文章 正文

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

2024-06-20 23
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 基于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>

素材

文章标签：
JavaScript
关键词：
vue3 uniapp
杨校
目录
相关文章
八音盒coding
|
29天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的软件工程项目管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的软件工程项目管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
八音盒coding
21 1
wishCoding
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
wishCoding
27 3
wishCoding
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
wishCoding
26 3
肥晨
|
6天前
|
前端开发
[巨详细]使用HBuilder-X新建uniapp项目教程
【6月更文挑战第6天】安装HBuilder-X 详细步骤可看上文》》 启动uniapp项目 先打开HBuilder-X
肥晨
13 5
wishCoding
|
17天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
wishCoding
40 12
yxybox
|
17天前
|
JSON 缓存 移动开发
原创自研uniapp+vue3手机桌面os管理系统
vue3-uniapp-os一款基于uniapp+vue3跨端手机版后台os系统新解决方案。
yxybox
92 3
wishCoding
|
17天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
wishCoding
27 1
wishCoding
|
24天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的软件工程项目管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的软件工程项目管理系统附带文章和源代码部署视频讲解等
wishCoding
19 5
wishCoding
|
23天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
wishCoding
18 2
小蜗牛耶
|
23天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的家政项目小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的家政项目小程序的详细设计和实现
小蜗牛耶
15 0
基于SpringBoot+Vue+uniapp微信小程序的家政项目小程序的详细设计和实现

热门文章

最新文章

  • 1
    UniApp 中的路由魔法：玩转页面导航与跳转
  • 2
    uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)
  • 3
    从零开始：UniApp 项目搭建指南
  • 4
    uniapp框架——初始化vue3项目(搭建ai项目第一步)
  • 5
    UniApp 项目中的生命周期详解：从诞生到逝去
  • 6
    UniApp状态管理：从深入理解到灵活运用
  • 7
    uniapp视频、音频上传的方法
  • 8
    UniApp video 使用（自定义进度条，及微信无法暂停播放设置进度问题）
  • 9
    uniapp/微信扫码打开公众号（并且判断是否关注公众号）
  • 10
    uniapp开发小程序配置文件解析
  • 1
    uniapp IOS从打包到上架流程（详细简单） 原创
    112
  • 2
    uniapp打包的ipa上架到appstore的傻瓜式教程
    54
  • 3
    UniApp打包教程：使用HBuilder X和AppUploader完成原生App云打包和上架指南“
    164
  • 4
    【Uniapp开发】APP的真机调试指南，从开发到上架全过程
    99
  • 5
    mPaaS常见问题之uniapp ios端云打包的配置config文件如何解决
    66
  • 6
    轻松实现 UniApp Xcode 上传 IPA 无需 Mac，appuploder 一键上传助你高效开发！
    49
  • 7
    【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
    173
  • 8
    uniapp项目中使用vue3开发多端项目实践
    50
  • 9
    (一)、项目介绍及知识点概述【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
    37
  • 10
    uniapp指南第1章---如何创建一个uniapp项目
    120

    • 相关课程

    更多
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • 移动Web前端开发
  • React 入门与实战

    • 相关电子书

    更多
  • React在大型后台管理项目中的工程实践
  • React在大型后台管理项目中的工程实践
  • 去哪儿网快速 App 开发及问题解决平台实践
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）