|
|
@@ -3,40 +3,51 @@
|
|
|
<view class="main">
|
|
|
<view class="one">
|
|
|
<view class="one_1">
|
|
|
- <view class="img">
|
|
|
- <image class="image" :src="info.goods.file&&info.goods.file.length>0?info.goods.file[0].url:''" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="info">
|
|
|
- <view class="name">
|
|
|
- {{info.goods.name}}
|
|
|
- </view>
|
|
|
- <view class="other">
|
|
|
- <view class="other_1">
|
|
|
- <text>价格：</text>
|
|
|
- <text>¥{{info.goods.sell_money}}元</text>
|
|
|
- </view>
|
|
|
- <view class="other_1">
|
|
|
- <text></text>
|
|
|
- <text>{{info.goods.brief}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <text>超值拼团</text>
|
|
|
+ </view>
|
|
|
+ <view class="one_2">
|
|
|
+ <text class="iconfont icon-qianggou"></text>
|
|
|
+ <text>快叫上伙伴一起抢</text>
|
|
|
+ <text class="iconfont icon-qianggou"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="two">
|
|
|
- <view class="list" v-for="(item,index) in info.persons" :key="index">
|
|
|
+ <view class="two_1">
|
|
|
<view class="img">
|
|
|
- <image class="image" src="../../static/logo.png" mode=""></image>
|
|
|
+ <image class="image" :src="info.goods.file&&info.goods.file.length>0?info.goods.file[0].url:''" mode=""></image>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ <view class="two_2">
|
|
|
<view class="name">
|
|
|
- {{item.name}}
|
|
|
+ {{info.goods.name}}
|
|
|
+ </view>
|
|
|
+ <view class="money">
|
|
|
+ ¥{{info.goods.sell_money}}元
|
|
|
+ </view>
|
|
|
+ <view class="brief">
|
|
|
+ {{info.goods.brief||''}}
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="list list_1" v-if="info.group_persons>info.persons.length">
|
|
|
- <text class="iconfont icon-cantuan"></text>
|
|
|
- <button type="default" size="mini" @tap.stop="toOpen">参团</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="thr">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view">
|
|
|
+ <view class="list-scroll-view">
|
|
|
+ <view class="thr_1">
|
|
|
+ <view class="list" v-for="(item,index) in info.persons" :key="index">
|
|
|
+ <view class="img">
|
|
|
+ <image class="image" src="../../static/logo.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list list_1" v-if="info.group_persons>info.persons.length">
|
|
|
+ <button type="default" size="mini" @tap.stop="toOpen">参团</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</mobile-frame>
|
|
|
</template>
|
|
|
@@ -76,37 +87,13 @@
|
|
|
],
|
|
|
name: '顾红伟'
|
|
|
},
|
|
|
- {
|
|
|
- file: [ //
|
|
|
- {
|
|
|
- url: this.$config.logoUrl
|
|
|
- }
|
|
|
- ],
|
|
|
- name: '顾红伟'
|
|
|
- },
|
|
|
- {
|
|
|
- file: [ //
|
|
|
- {
|
|
|
- url: this.$config.logoUrl
|
|
|
- }
|
|
|
- ],
|
|
|
- name: '顾红伟'
|
|
|
- },
|
|
|
- {
|
|
|
- file: [ //
|
|
|
- {
|
|
|
- url: this.$config.logoUrl
|
|
|
- }
|
|
|
- ],
|
|
|
- name: '顾红伟'
|
|
|
- },
|
|
|
]
|
|
|
},
|
|
|
// 分享
|
|
|
share: {
|
|
|
- title: '天恩活泉',
|
|
|
- path: `/pages/index/index`,
|
|
|
- imageUrl: this.$config.shareUrl,
|
|
|
+ title: '测试商品',
|
|
|
+ path: `/pagesHome/group/share`,
|
|
|
+ imageUrl: '',
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
@@ -159,108 +146,160 @@
|
|
|
flex-direction: column;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
+ background-color: #23B67A;
|
|
|
|
|
|
.one {
|
|
|
+ background-color: #D9FDEF;
|
|
|
+ margin: 2vw 6vw;
|
|
|
+ border-radius: 10px;
|
|
|
padding: 2vw;
|
|
|
|
|
|
.one_1 {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 30vw;
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 15vh;
|
|
|
- border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px dashed #085623;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ padding: 0 0 1vw 0;
|
|
|
|
|
|
- }
|
|
|
+ text {
|
|
|
+ font-size: 61px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #357846;
|
|
|
+ font-family: cursive;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .info {
|
|
|
- width: 66vw;
|
|
|
- padding: 0 0 0 2vw;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- margin: 0 0 1vw 0;
|
|
|
- }
|
|
|
-
|
|
|
- .other {
|
|
|
- .other_1 {
|
|
|
- font-size: 14px;
|
|
|
- margin: 0 0 1vw 0;
|
|
|
-
|
|
|
- text:nth-child(2) {
|
|
|
- color: #858585;
|
|
|
- }
|
|
|
- }
|
|
|
+ .one_2 {
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .other_1:nth-child(1) {
|
|
|
- text:last-child {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
- }
|
|
|
+ text {
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
|
|
|
- .other_1:nth-child(2) {
|
|
|
- text:last-child {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- word-break: break-all;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ text:nth-child(2) {
|
|
|
+ font-size: 18px;
|
|
|
+ letter-spacing: 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #357846;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.two {
|
|
|
+ background-color: #D9FDEF;
|
|
|
+ margin: 2vw;
|
|
|
+ border-radius: 10px;
|
|
|
padding: 2vw;
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
|
- .list {
|
|
|
- width: 18vw;
|
|
|
- text-align: center;
|
|
|
- padding: 2vw;
|
|
|
- border-radius: 10px;
|
|
|
- margin: 0 2.5vw 2vw 0;
|
|
|
- box-shadow: 0 0 3px #858585;
|
|
|
+ .two_1 {
|
|
|
+ display: flex;
|
|
|
|
|
|
.img {
|
|
|
.image {
|
|
|
- width: 18vw;
|
|
|
- height: 11vh;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
border-radius: 90px;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ padding: 0 0 0 2vw;
|
|
|
|
|
|
.name {
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ color: #357846;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .list:nth-child(4n) {
|
|
|
- margin: 0 0 2vw 0;
|
|
|
+ .money {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #ff0000;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brief {
|
|
|
+ font-size: 14px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ color: #858585;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .list_1 {
|
|
|
- text {
|
|
|
- font-size: 45px;
|
|
|
- margin: 1vw 0 2vw 0;
|
|
|
- display: inline-block;
|
|
|
+ .thr {
|
|
|
+ position: relative;
|
|
|
+ flex-grow: 1;
|
|
|
+ margin: 0 2vw 2vw 2vw;
|
|
|
+ width: 94vw;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 3px solid #D9FDEF;
|
|
|
+
|
|
|
+ .thr_1 {
|
|
|
+ padding: 2vw;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: 20vw;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 3vw 2vw 0;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ .image {
|
|
|
+ width: 16vw;
|
|
|
+ height: 16vw;
|
|
|
+ border-radius: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- button {
|
|
|
- background-color: #ff0000;
|
|
|
- color: #fff;
|
|
|
+ .list:nth-child(4n) {
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_1 {
|
|
|
+ button {
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 90px;
|
|
|
+ width: 16vw;
|
|
|
+ height: 16vw;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 16vw;
|
|
|
+ background-color: #ffffff5f;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .list-scroll-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
