Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

店铺详情页/发现页/个人主页/发现详情页

master
Enzo 4 years ago
parent
3796960ca0
commit
dec3f1e102
6 changed files with 543 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      App.vue
  2. 16
      components/self-line/self-line.vue
  3. 27
      pages.json
  4. 127
      pages/discover/discover.vue
  5. 236
      pages/discover/discoverdetails.vue
  6. 139
      pages/user/my/my.vue

2
App.vue
View File

@ -78,7 +78,7 @@ page {
padding: 0;
border: none;
font-size: 16px;
background-color: #F3F3F3;
background-color: white;
line-height: 1.6;
}
.globalColor {

16
components/self-line/self-line.vue
View File

@ -0,0 +1,16 @@
<template>
<view class="bg-gray1 h-20" />
</template>
<script>
</script>
<style>
.h-20 {
height: 20rpx;
}
.bg-gray1 {
background-color: #F8F8F8;
color: #333333;
}
</style>

27
pages.json
View File

@ -4,10 +4,9 @@
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index/index",
"path": "pages/discover/discover",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh":true,
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
@ -18,6 +17,28 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/my",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/discover/discoverdetails",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh":true,
"navigationStyle": "custom"
}
},
{
"path": "pages/index/microPages/microPages",
"style": {

127
pages/discover/discover.vue
View File

@ -0,0 +1,127 @@
<template>
<view>
<lf-nav :spreadOut="true" :showIcon="true" title="发现"></lf-nav>
<view>
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
</view>
<view v-for="i of 6">
<view class="lf-p-32">
<view class="lf-flex">
<view class="tag-father">
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
<view class="head-tag">V</view>
</view>
<view class="lf-flex-column lf-m-l-20">
<view class="lf-font-32 lf-color-black lf-font-bold">最新FUEJFEI</view>
<view class="lf-font-24 lf-color-777 lf-m-t-15">08-28 18:39</view>
</view>
</view>
<view class="lf-font-28 lf-color-333 lf-m-t-20">
在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售
</view>
<view class="lf-flex-wrap lf-m-t-20">
<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
</view>
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
<view class="lf-row-center">
<text class="lf-iconfont icon-shoucang"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text>
</view>
<view class="lf-row-center">
<text class="lf-iconfont icon-fabu"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text>
</view>
<view class="lf-row-center">
<text class="lf-iconfont icon-fenxiang"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text>
</view>
</view>
</view>
<self-line/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tab_list: [
{name: '最新',id: 1},
{name: '最热',id: 2},
{name: '已关注',id: 3},
{name: '消息',id: 4}
],
current: 0,
}
},
methods: {
tabChange(index){
this.current = index;
},
}
}
</script>
<style>
page {
background-color: white;
}
</style>
<style lang="scss" scoped>
.tag-father {
position: relative;
}
.head-tag {
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 24rpx;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background-color: #15716E;
border: 1rpx solid #FFFFFF;
position: absolute;
left: 66rpx;
top: 70rpx;
z-index: 99;
}
.qzone-img {
width: 220rpx;
height: 220rpx;
border-radius: 10rpx;
margin-right: 12rpx;
&:nth-child(3n) {
margin-right: 0;
}
&:nth-child(n + 4) {
margin-top: 12rpx;
}
}
.head-img {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
// tab样式
/deep/.u-scroll-box {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
/deep/.u-scroll-box .u-tab-bar {
background-color: #15716E!important;
width: 80rpx!important;
position: absolute;
left: 0;
bottom: -14rpx;
}
/deep/ .u-tab-item {
font-size: 28rpx!important;
}
</style>

236
pages/discover/discoverdetails.vue
View File

@ -0,0 +1,236 @@
<template>
<view>
<lf-nav :spreadOut="true" :showIcon="true" title="详情"></lf-nav>
<view class="lf-p-32">
<view class="lf-flex">
<view class="tag-father">
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
<view class="head-tag">V</view>
</view>
<view class="lf-flex-column lf-m-l-20">
<view class="lf-font-32 lf-color-black lf-font-bold">最新FUEJFEI</view>
<view class="lf-font-24 lf-color-777 lf-m-t-15">08-28 18:39</view>
</view>
</view>
<view class="lf-font-28 lf-color-333 lf-m-t-20">
在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售
</view>
<view class="lf-flex-wrap lf-m-t-20">
<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
</view>
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
<view class="lf-row-center">
<text class="lf-iconfont icon-shoucang"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text>
</view>
<view class="lf-row-center">
<text class="lf-iconfont icon-fabu"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text>
</view>
<view class="lf-row-center">
<text class="lf-iconfont icon-fenxiang"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text>
</view>
</view>
</view>
<self-line/>
<!-- 评论 -->
<view class="comment">
<view class="lf-color-555 lf-font-24">共 2条评论</view>
<!-- 评论开始 -->
<view>
<view class="lf-m-t-20">
<view class="lf-flex">
<view>
<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
</view>
<view class="lf-flex-column lf-m-l-20">
<view class="lf-color-999 lf-font-24">金城优选哈哈</view>
<view>
<view class="lf-color-black lf-line-2" style="max-width:550rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view>
</view>
</view>
<view class="lf-m-l-32" style="position: absolute;right:33rpx;">
<view>
<text class="lf-iconfont icon-shoucang"></text>
</view>
<view class="lf-color-555 lf-font-24">10</view>
</view>
</view>
</view>
<view class="comment-replay">
<view class="lf-flex">
<view>
<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
</view>
<view class="lf-flex-column lf-m-l-20">
<view class="lf-color-999 lf-font-24">优选嘿嘿</view>
<view>
<view class="lf-color-black lf-line-2 lf-row-center" style="max-width: 446rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view>
</view>
</view>
<view class="lf-m-l-32" style="position: absolute;right:33rpx;">
<view>
<text class="lf-iconfont icon-shoucang"></text>
</view>
<view class="lf-color-555 lf-font-24">10</view>
</view>
</view>
<view class="lf-flex">
<view class="lf-flex lf-m-t-30">
<view>
<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
</view>
<view class="lf-flex-column lf-m-l-20">
<view class="lf-color-999 lf-font-24">金城优选哈哈</view>
<view class="lf-row-center" style="max-width: 446rpx;">
<text class="lf-color-333 lf-m-r-10">回复</text>
<text class="lf-font-24 lf-color-999">优选嘿嘿:</text>
<text class="lf-font-26 lf-color-black lf-m-l-10">哈哈哈哈哈</text>
<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text>
</view>
</view>
</view>
<view class="lf-m-t-30" style="position: absolute;right:33rpx;">
<view>
<text class="lf-iconfont icon-shoucang"></text>
</view>
<view class="lf-color-555 lf-font-24">10</view>
</view>
</view>
</view>
</view>
<!-- 评论结束 -->
<view>
<view class="lf-m-t-20">
<view class="lf-flex">
<view>
<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
</view>
<view class="lf-flex-column lf-m-l-20">
<view class="lf-color-999 lf-font-24">金城优选哈哈</view>
<view>
<view class="lf-color-black lf-line-2" style="max-width:550rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view>
</view>
</view>
<view class="lf-m-l-32" style="position: absolute;right:33rpx;">
<view>
<text class="lf-iconfont icon-shoucang"></text>
</view>
<view class="lf-color-555 lf-font-24">10</view>
</view>
</view>
</view>
</view>
</view>
<!-- 底部tab -->
<view class="comment-tab">
<view>
<input class="rom-search" type="text" placeholder="说点什么" />
</view>
<view class="lf-row-center">
<view class="lf-row-center lf-m-r-35">
<text class="lf-iconfont icon-shoucang"></text>
<text class="lf-m-l-10 lf-font-24 lf-color-black">379</text>
</view>
<view class="lf-row-center lf-m-r-35">
<text class="lf-iconfont icon-fenxiang"></text>
<text class="lf-m-l-10 lf-font-24 lf-color-black">3579</text>
</view>
<view class="lf-row-center lf-m-r-35">
<text class="lf-iconfont icon-fabu"></text>
<text class="lf-m-l-10 lf-font-24 lf-color-black">379</text>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style scoped lang="scss">
.tag-father {
position: relative;
}
.head-tag {
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 24rpx;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background-color: #15716E;
border: 1rpx solid #FFFFFF;
position: absolute;
left: 66rpx;
top: 70rpx;
z-index: 99;
}
/deep/.input-placeholder{
color: #aaa;
font-size: 28rpx;
}
.rom-search {
width: 279rpx;
height: 70rpx;
background: #F4F8F8;
border-radius: 35rpx;
padding-left: 30rpx;
font-size: 28rpx;
}
.comment-tab {
padding: 0 0 0 32rpx;
display: flex;
justify-content: space-between;
height: 100rpx;
align-items: center;
width: 100%;
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 0;
z-index: 99;
background-color: white;
}
.comment-replay {
margin-left: 96rpx;
margin-top: 28rpx;
}
.comment-img {
width: 75rpx;
height: 75rpx;
border-radius: 50%;
}
.comment{
width: 100%;
height: max-content;
background-color: white;
border-radius: 5rpx;
box-sizing: border-box;
padding: 32rpx;
font-size: 28rpx;
color: #777777;
padding-bottom: 120rpx;
}
.qzone-img {
position: relative;
width: 220rpx;
height: 220rpx;
border-radius: 10rpx;
margin-right: 12rpx;
&:nth-child(3n) {
margin-right: 0;
}
&:nth-child(n + 4) {
margin-top: 12rpx;
}
}
.head-img {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
</style>

139
pages/user/my/my.vue
View File

@ -0,0 +1,139 @@
<template>
<view>
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#F3F8F8" title="个人主页"></lf-nav>
<view class="user-top">
<view class="lf-row-between lf-w-100">
<view class="lf-flex">
<view class="tag-father">
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
<view class="head-tag">V</view>
</view>
<view class="lf-flex-column lf-m-l-20">
<text class="lf-font-42 lf-color-black lf-font-bold">最新</text>
<text class="lf-font-28 lf-color-black">0 关注 | 0 粉丝</text>
</view>
</view>
<view>
<button class="head-btn">关注</button>
</view>
</view>
</view>
<view class="lf-m-32">
<view class="lf-font-48 lf-color-black lf-font-bold">
08月27日
</view>
<view class="lf-color-777 lf-font-24">
18:39
</view>
<view class="lf-flex-wrap lf-m-t-20">
<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
</view>
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
<view class="lf-row-center">
<text class="lf-iconfont icon-shoucang"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text>
</view>
<view class="lf-row-center">
<text class="lf-iconfont icon-fabu"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text>
</view>
<view class="lf-row-center">
<text class="lf-iconfont icon-fenxiang"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text>
</view>
</view>
</view>
<view class="lf-m-32">
<view class="lf-font-48 lf-color-black lf-font-bold">
08月27日
</view>
<view class="lf-color-777 lf-font-24">
18:39
</view>
<view class="lf-flex-wrap lf-m-t-20">
<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
</view>
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
<view class="lf-row-center">
<text class="lf-iconfont icon-shoucang"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text>
</view>
<view class="lf-row-center">
<text class="lf-iconfont icon-fabu"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text>
</view>
<view class="lf-row-center">
<text class="lf-iconfont icon-fenxiang"></text>
<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
page {
background-color: white;
}
</style>
<style lang="scss" scoped>
.tag-father {
position: relative;
}
.head-tag {
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 24rpx;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background-color: #15716E;
border: 1rpx solid #FFFFFF;
position: absolute;
left: 76rpx;
top: 86rpx;
z-index: 99;
}
.qzone-img {
width: 220rpx;
height: 220rpx;
border-radius: 10rpx;
margin-right: 12rpx;
&:nth-child(3n) {
margin-right: 0;
}
&:nth-child(n + 4) {
margin-top: 12rpx;
}
}
.user-top {
background-color: #F3F8F8;
height: 236rpx;
padding: 60rpx;
display: flex;
align-items: center;
}
.head-img {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}
.head-btn {
width: 160rpx;
height: 70rpx;
background: #15716E;
display: flex;
align-items: center;
font-size: 28rpx;
color: white;
justify-content: center;
border-radius: 35rpx;
}
</style>
Write Preview
Loading…
Cancel
Save