[歡迎關注wx公衆號：一縷風沙渡，回覆uniapp拼團倒計時獲取最新文件]
<template>
<view class="main-container">
<u-navbar :is-back="false" :background="bg" class="home-top" @tap="goBack">
<!-- 導航欄自定義膠囊 -->
<image src="../../static/order_arrow_left.png" mode="aspectFit" class="header-img"></image>
<view class="title">
參與拼團
</view>
</u-navbar>
<view class="order-item">
<view class="good-box">
<image src="../../static/bgimg/1.jpg" mode="aspectFill" class="good-img"></image>
<view class="good-info">
<view class="good-title">
美的Midea電飯煲電飯鍋4L智能預約電飯煲氣動渦輪典範...
</view>
<view class="good-bottom">
<view class="tl-bg-fff tl-font-24-red">
廣告費 <text> ¥16.87</text>
</view>
<view class="good-price">
¥358
</view>
</view>
</view>
</view>
</view>
<view class="lin-h16"></view>
<view class="tl-section">
<view class="tl-pin-user">
<view>
<block v-for="(item2, index2) in headImages" :key="index2">
<image :src="item2" class="tl-head-img"></image>
</block>
</view>
<view class="tl-font-28-900">
{{item.total_user || '5'}}人團還差 <text class="tl-font-28-red">{{item.remain_num || '1'}}</text>人
</view>
</view>
<view class="tl-section-clock">
<image :src="clockImg" class="tl-clock"></image>
</view>
<view class="tl-section-time">
<text class="tl-tag tl-font-32-fff">72</text> <text class="tl-point">：</text><text class="tl-tag tl-font-32-fff">52</text> <text class="tl-point">：</text><text class="tl-tag tl-font-32-fff">32</text>
</view>
<view class="tl-section-btn">
<button class="tl-btn-670 tl-font-36-fff">參與拼團</button>
</view>
<view class="tl-font-30-686">
拼團規則：好友拼單·人滿發貨·人不滿退款
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
headImages: [
'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/good_1.png',
'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/good_1.png',
'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/good_1.png',
'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/good_1.png',
],
clockImg: 'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/pin_clock.png',
}
},
methods: {
// 返回上一頁
goBack() {
this.showModal = true
},
}
}
</script>
<style>
.main-container {
width: 100vw;
height: 100vh;
background: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
}
/**
* 頂部導航
*/
.home-top {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
line-height: 50rpx;
background-color: #FFFFFF;
color: #0C0900;
opacity: 1;
}
.home-top .title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
}
.header-img {
width: 44rpx;
height: 44rpx;
margin-left: 20rpx;
}
.order-item .good-box {
width: 670rpx;
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 0;
}
.order-item .good-box .good-img {
width: 200rpx;
height: 200rpx;
opacity: 1;
border-radius: 16rpx;
}
.good-box .good-info {
width: 446rpx;
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.good-info .good-title {
width: 446rpx;
height: 88rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
line-height: 44rpx;
color: #000000;
opacity: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.good-info .good-bottom {
width: 100%;
height: 50rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.good-info .good-bottom .attr {
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
line-height: 40rpx;
}
.good-info .good-bottom .good-price {
height: 50rpx;
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
line-height: 50rpx;
color: #0C0900;
opacity: 1;
}
.lin-h16{
height: 16rpx;
width: 100%;
background: #F5F6F9;;
}
.tl-bg-fff {
background: #FEE8E2;
border-radius: 8rpx;
text-align: center;
padding: 6rpx 12rpx;
}
.tl-font-24-red {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F86341;
opacity: 1;
}
.tl-section{
width: 750rpx;
padding: 40rpx;
}
.tl-pin-user {
padding: 60rpx 0 0 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.tl-head-img {
width: 98rpx;
height: 98rpx;
background: rgba(0, 0, 0, 0);
border: 2rpx solid #FFFFFF;
border-radius: 50%;
opacity: 1;
margin-left: -38rpx;
}
.tl-font-28-900 {
font-size: 36rpx;
font-family: PingFang SC;
font-weight: 700;
color: #0C0900;
}
.tl-font-28-red {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F86341;
opacity: 1;
}
.tl-section-clock{
display: flex;
justify-content: center;
align-items: center;
margin: 68rpx 0 24rpx 0;
}
.tl-clock{
width: 388rpx;
height: 174rpx;
}
.tl-section-time{
text-align: center;
}
.tl-tag{
height: 46rpx;
padding: 4rpx 8rpx;
background: #F86341;
border-radius: 8rpx;
}
.tl-font-32-fff{
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
line-height: 48rpx;
color: #FFFFFF;
}
.tl-point{
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
line-height: 44rpx;
color: #F86341;
opacity: 1;
}
.tl-section-btn{
display: flex;
justify-content: center;
align-items: center;
margin: 68rpx 0 24rpx 0;
}
.tl-btn-670{
width: 670rpx;
height: 100rpx;
background: #F86341;
box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.16);
opacity: 1;
border-radius: 60rpx;
}
.tl-font-36-fff{
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
.tl-font-30-686{
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #686661;
text-align: center;
}
</style>
今天中午，吳老師帶我們全班同學去參觀圖書館。同學們排好隊安靜地過去了。我們一進圖書館，哇，好多好多的課外書啊。我連忙問老師：＂我們能不能借圖書館裏的課外書來看啊？＂老師說只要能成爲＂讀書小明星＂，就能直接來看書了。我決定要努力多看課外書。讓自己再成爲＂讀書小明星＂。