|
@@ -1,236 +1,476 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <image class="authorize-bg" src="../../static/images/loginBg.png"></image>
|
|
|
- <image class="logo" src="../../static/images/loginLogo.png"></image>
|
|
|
- <view class="authorize-box">
|
|
|
- <button class="authorize-button" open-type="getUserInfo" @click="appLoginWx()">
|
|
|
- <view class="button-text">获取角色信息</view>
|
|
|
- <view class="iconfont iconshangchuan1"></view>
|
|
|
- </button>
|
|
|
- <view class="authorize-info">{{userNmae}}</view>
|
|
|
- <!-- <button class="authorize-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
|
|
- <view class="button-text">获取手机号</view>
|
|
|
- <view class="iconfont iconshangchuan1"></view>
|
|
|
- </button>
|
|
|
- <view class="authorize-info">{{wxPhoneData? '****************' : ''}}</view> -->
|
|
|
- <view class="authorize-login" @click="getUserInfo">登录</view>
|
|
|
- </view>{{tipxx}}
|
|
|
+ <view class="search">
|
|
|
+ <uni-search-bar radius="100" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#ffffff" @confirm="goToGoodList" />
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
|
|
|
+ <swiper-item v-for="(item,index) in advertList" :key="index">
|
|
|
+ <cover-image :src="item.imgPath"></cover-image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <view class="entrance">
|
|
|
+ <view class="entrance-col" @click="goToGoodList(null, 3)">
|
|
|
+ <view class="entrance-button caizhai">自助采摘</view>
|
|
|
+ </view>
|
|
|
+ <view class="entrance-col" @click="goToGoodList(null, 4)">
|
|
|
+ <view class="entrance-button zhongzhi">共享种植</view>
|
|
|
+ </view>
|
|
|
+ <view class="entrance-col" @click="goToGoodList(null, 2)">
|
|
|
+ <view class="entrance-button paimai">拍 卖</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="index-title">
|
|
|
+ <view class="title-text">精品推荐</view>
|
|
|
+ <view class="title-tip">直播带货,视频推荐</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-box video-box">
|
|
|
+ <view class="video-col" style="margin-right: 11px;" v-if="liveTelecast" @click="goToLiveList(1)">
|
|
|
+ <view class="video-title">直播大厅
|
|
|
+ <view class="circular">
|
|
|
+ <text class="iconfont iconfangxiang"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <cover-image class="video-img" :src="liveTelecast.imgUrl"></cover-image>
|
|
|
+ <view class="video-name">{{liveTelecast.liveName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="video-col" style="margin-left: 11px;" v-if="shortVideo" @click="goToLiveList(2)">
|
|
|
+ <view class="video-title">短视频推荐
|
|
|
+ <view class="circular">
|
|
|
+ <text class="iconfont iconfangxiang"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <cover-image class="video-img" :src="shortVideo.coverUrl"></cover-image>
|
|
|
+ <view class="video-name">{{shortVideo.videoName}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="index-title">
|
|
|
+ <view class="title-text">今日特惠</view>
|
|
|
+ <view class="title-tip">精品特价,限量抢购</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-box" style="width: calc(100% - 24px);margin-left: 12px; display: flex;justify-content: space-between;">
|
|
|
+ <view class="discount-col" v-for="(item,index) in discountList" :key="index" @click="goToGoodDetails(item)">
|
|
|
+ <cover-image class="discount-img" :src="item.imgPath"></cover-image>
|
|
|
+ <view class="discount-name">{{item.productName}}</view>
|
|
|
+ <view class="discount-price">
|
|
|
+ <text class="sale-icon">¥</text>
|
|
|
+ <text class="sale-price">{{item.bizPrice}}</text>
|
|
|
+ <text class="price">原价:{{item.originalPrice}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="index-title" style="margin-bottom: 4px;">
|
|
|
+ <view class="title-text">猜你喜欢</view>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="content-box" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
|
|
|
+ @refresherrefresh="onRefresh" @refresherrestore="onRestore">
|
|
|
+ <view class="goods-row" v-for="(item,index) in goodsList" :key="index" @click="goToGoodDetails(item)">
|
|
|
+ <cover-image class="goods-img" :src="item.imgPath"></cover-image>
|
|
|
+ <view class="goods-info">
|
|
|
+ <view class="goods-name">{{item.productName}}</view>
|
|
|
+ <view class="goods-number">{{item.sellCount}}人付款</view>
|
|
|
+ <text class="goods-price">
|
|
|
+ <text class="sale-icon">¥</text>
|
|
|
+ <text class="sale-price">{{item.bizPrice}}</text>
|
|
|
+ <text class="price">原价:{{item.originalPrice}}</text>
|
|
|
+ <text class="iconfont icongengduo"></text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
<u-top-tips ref="uTips"></u-top-tips>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- const NET = require('@/utils/request')
|
|
|
- const API = require('@/config/api')
|
|
|
+ const NET = require('../../utils/request')
|
|
|
+ const API = require('../../config/api')
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- wxLoginData: null,
|
|
|
- wxPhoneData: null,
|
|
|
- userNmae: '',
|
|
|
- tipxx: '',
|
|
|
+ liveTelecast: null,
|
|
|
+ shortVideo: null,
|
|
|
+ advertList: [],
|
|
|
+ discountList: [],
|
|
|
+ triggered: false,
|
|
|
+ goodsList: [],
|
|
|
}
|
|
|
},
|
|
|
- onReady() {
|
|
|
- this.appLoginWx()
|
|
|
+ onLoad() {
|
|
|
+ if (!uni.getStorageSync('token')) {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/index/login'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getBaseInfo()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.triggered = true;
|
|
|
+ }, 1000)
|
|
|
},
|
|
|
methods: {
|
|
|
- getPhoneNumber(e) {
|
|
|
- if (this.wxLoginData) {
|
|
|
- let _that = this
|
|
|
- uni.setStorage({
|
|
|
- key: 'wxPhoneData',
|
|
|
- data: {
|
|
|
- encryptedData2: e.detail.encryptedData,
|
|
|
- iv2: e.detail.iv,
|
|
|
- }
|
|
|
- })
|
|
|
- this.wxPhoneData = uni.getStorageSync("wxPhoneData")
|
|
|
- } else {
|
|
|
+ // 查询数据
|
|
|
+ getBaseInfo() {
|
|
|
+ NET.request(API.getAdvert, {}, 'GET').then(res => {
|
|
|
+ this.advertList = res.data
|
|
|
+ }).catch(error => {
|
|
|
this.$refs.uTips.show({
|
|
|
- title: '请先等待角色信息获取完成',
|
|
|
+ title: '获取广告列表失败',
|
|
|
type: 'warning',
|
|
|
})
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取个人数据
|
|
|
- getUserInfo() {
|
|
|
- NET.request(API.WxLogin, {
|
|
|
- ...this.wxLoginData,
|
|
|
- // ...this.wxPhoneData,
|
|
|
- }, 'POST').then(res => {
|
|
|
- uni.setStorage({
|
|
|
- key: 'token',
|
|
|
- data: res.data.token
|
|
|
+ })
|
|
|
+ NET.request(API.getLiveTelecast + '/1/1', {}, 'GET').then(res => {
|
|
|
+ this.liveTelecast = res.data.list.length ? res.data.list[0] : null
|
|
|
+ }).catch(error => {
|
|
|
+ this.$refs.uTips.show({
|
|
|
+ title: '获取直播列表失败',
|
|
|
+ type: 'warning',
|
|
|
})
|
|
|
- uni.setStorage({
|
|
|
- key: 'userData',
|
|
|
- data: {
|
|
|
- headImage: JSON.parse(this.wxLoginData.rawData).avatarUrl,
|
|
|
- userName: res.data.name,
|
|
|
- userId: res.data.userId,
|
|
|
- }
|
|
|
+ })
|
|
|
+ NET.request(API.getShortVideo + '/1/1', {}, 'GET').then(res => {
|
|
|
+ this.shortVideo = res.data.list.length ? res.data.list[0] : null
|
|
|
+ }).catch(error => {
|
|
|
+ this.$refs.uTips.show({
|
|
|
+ title: '获取短视频列表失败',
|
|
|
+ type: 'warning',
|
|
|
})
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/home'
|
|
|
+ })
|
|
|
+ NET.request(API.getPreferentialGoods, {}, 'GET').then(res => {
|
|
|
+ this.discountList = res.data
|
|
|
+ }).catch(error => {
|
|
|
+ this.$refs.uTips.show({
|
|
|
+ title: '获取今日特惠商品列表失败',
|
|
|
+ type: 'warning',
|
|
|
})
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 下拉刷新
|
|
|
+ onRefresh() {
|
|
|
+ this.getPreferGoodsList()
|
|
|
+ },
|
|
|
+ // 刷新终止
|
|
|
+ onRestore() {
|
|
|
+ this.triggered = 'restore'
|
|
|
+ },
|
|
|
+ // 获取猜你喜欢商品列表
|
|
|
+ getPreferGoodsList() {
|
|
|
+ NET.request(API.getPreferGoods, {}, 'GET').then(res => {
|
|
|
+ this.triggered = false;
|
|
|
+ this.goodsList = res.data
|
|
|
}).catch(error => {
|
|
|
this.$refs.uTips.show({
|
|
|
- title: '微信登录授权失败',
|
|
|
+ title: '获取猜你喜欢商品列表失败',
|
|
|
type: 'warning',
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- // 获取登录权限
|
|
|
- appLoginWx() {
|
|
|
- uni.getProvider({
|
|
|
- service: 'oauth',
|
|
|
- success: (res) => {
|
|
|
- if (~res.provider.indexOf('weixin')) {
|
|
|
- uni.login({
|
|
|
- provider: 'weixin',
|
|
|
- success: (res2) => {
|
|
|
- uni.getUserInfo({
|
|
|
- provider: 'weixin',
|
|
|
- success: (info) => {
|
|
|
- uni.setStorage({
|
|
|
- key: 'wxLoginData',
|
|
|
- data: {
|
|
|
- code: res2.code,
|
|
|
- encryptedData: info.encryptedData,
|
|
|
- iv: info.iv,
|
|
|
- rawData: info.rawData,
|
|
|
- signature: info.signature,
|
|
|
- }
|
|
|
- })
|
|
|
- this.wxLoginData = uni.getStorageSync("wxLoginData")
|
|
|
- this.userNmae = JSON.parse(this.wxLoginData.rawData).nickName
|
|
|
- this.$refs.uTips.show({
|
|
|
- title: '获取角色信息成功',
|
|
|
- type: 'success',
|
|
|
- })
|
|
|
- },
|
|
|
- fail: (error) => {
|
|
|
- this.$refs.uTips.show({
|
|
|
- title: '微信登录授权失败',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
- this.$refs.uTips.show({
|
|
|
- title: '微信登录授权失败',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$refs.uTips.show({
|
|
|
- title: '请先安装微信或升级版本',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ // 跳转商品列表
|
|
|
+ goToGoodList(data, type) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pagesGood/goodList?goodType=' + (type ? type : (1 + '&goodName=' + data.value))
|
|
|
});
|
|
|
},
|
|
|
- },
|
|
|
+ // 跳转直播大厅
|
|
|
+ goToLiveList(type) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pagesGood/videoList?videoType=' + type
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 跳转商品详情
|
|
|
+ goToGoodDetails(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pagesGood/goodDetails?goodId=' + item.productId + '&goodType=' + item.productType
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- page {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
.container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- position: absolute;
|
|
|
+ background-size: 128px 124px;
|
|
|
+ background-position: center 510px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: url(@/static/images/indexBg.png);
|
|
|
|
|
|
- .authorize-bg {
|
|
|
+ .search {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ .uni-searchbar {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .logo {
|
|
|
- width: 90px;
|
|
|
- height: 90px;
|
|
|
- float: left;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 40px;
|
|
|
- transform: translateX(-50%);
|
|
|
+ .swiper {
|
|
|
+ height: 175px;
|
|
|
+ background-color: #6CA63A;
|
|
|
+ position: relative;
|
|
|
+ z-index: -1;
|
|
|
}
|
|
|
|
|
|
- .authorize-box {
|
|
|
- width: 230px;
|
|
|
- float: left;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 170px;
|
|
|
- transform: translateX(-50%);
|
|
|
-
|
|
|
- .authorize-button {
|
|
|
- width: 230px;
|
|
|
- height: 30px;
|
|
|
- float: left;
|
|
|
- padding: 0px;
|
|
|
- background-color: transparent;
|
|
|
- border: none;
|
|
|
- box-shadow: none;
|
|
|
+ .entrance {
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ height: 100px;
|
|
|
+ margin-top: -16px;
|
|
|
+ margin-left: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 15px;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
|
|
|
|
|
|
- .button-text {
|
|
|
- height: 30px;
|
|
|
- float: left;
|
|
|
- line-height: 30px;
|
|
|
+ .entrance-col {
|
|
|
+ width: 96px;
|
|
|
+ height: 72px;
|
|
|
+ margin-top: 15px;
|
|
|
+ background-size: 96px 56px;
|
|
|
+ background-position: center 10px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: url(@/static/images/entrance.png);
|
|
|
+
|
|
|
+ .entrance-button {
|
|
|
+ width: 96px;
|
|
|
+ height: 72px;
|
|
|
+ padding-top: 60px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
font-size: 15px;
|
|
|
font-family: PingFang SC;
|
|
|
- color: #FEFEFE;
|
|
|
- margin-right: 4px;
|
|
|
+ color: #52A63A;
|
|
|
+ line-height: 12px;
|
|
|
+ background-size: 50px;
|
|
|
+ background-position: center top;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .caizhai {
|
|
|
+ background-image: url(@/static/images/caizhai.png);
|
|
|
}
|
|
|
|
|
|
- .iconfont {
|
|
|
- float: left;
|
|
|
- color: #FEFEFE;
|
|
|
- font-size: 28px;
|
|
|
- line-height: 30px;
|
|
|
+ .zhongzhi {
|
|
|
+ background-image: url(@/static/images/zhongzhi.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ .paimai {
|
|
|
+ background-image: url(@/static/images/paimai.png);
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .index-title {
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ border-left: 1px solid #6CA63A;
|
|
|
+ padding: 2px 0 2px 5px;
|
|
|
+ margin: 15px 12px 10px 12px;
|
|
|
|
|
|
- .authorize-button:after {
|
|
|
- border: none;
|
|
|
+ .title-text {
|
|
|
+ height: 20px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #6CA63A;
|
|
|
}
|
|
|
|
|
|
- .authorize-info {
|
|
|
- width: 230px;
|
|
|
- height: 36px;
|
|
|
- float: left;
|
|
|
- margin-bottom: 30px;
|
|
|
- border-bottom: 1px solid #FFFFFF;
|
|
|
+ .title-tip {
|
|
|
+ height: 14px;
|
|
|
+ line-height: 14px;
|
|
|
font-size: 12px;
|
|
|
font-family: PingFang SC;
|
|
|
- color: #FEFEFE;
|
|
|
- line-height: 36px;
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .authorize-login {
|
|
|
- width: 220px;
|
|
|
- height: 36px;
|
|
|
- float: left;
|
|
|
- margin: 10px 5px;
|
|
|
+ .content-box {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .discount-col {
|
|
|
+ width: calc(50% - 6px);
|
|
|
background: #FFFFFF;
|
|
|
- border-radius: 20px;
|
|
|
- font-size: 15px;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #52A63A;
|
|
|
- line-height: 36px;
|
|
|
- text-align: center;
|
|
|
+ box-shadow: 1px 2px 19px 0px rgba(0, 0, 0, 0.09);
|
|
|
+ border-radius: 5px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .discount-img {
|
|
|
+ height: 170px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .discount-name {
|
|
|
+ height: 12px;
|
|
|
+ margin: 7px 6px 10px 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #343434;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .discount-price {
|
|
|
+ width: calc(100% - 12px);
|
|
|
+ margin-left: 6px;
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .sale-icon {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6CA63A;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sale-price {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #6CA63A;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 10px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #A67954;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-row {
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ height: 104px;
|
|
|
+ margin: 6px 0 12px 12px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.09);
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .goods-img {
|
|
|
+ width: 104px;
|
|
|
+ height: 104px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-info {
|
|
|
+ width: calc(100% - 104px);
|
|
|
+ padding: 10px 10px 10px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .goods-name {
|
|
|
+ height: 36px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 18px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-number {
|
|
|
+ height: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 16px;
|
|
|
+ margin: 6px 0 4px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-price {
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+
|
|
|
+ .sale-icon {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6CA63A;
|
|
|
+ margin-left: -2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sale-price {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #6CA63A;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 12px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #A67954;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ float: right;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-box {
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ margin-left: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 1px 2px 19px 0px rgba(0, 0, 0, 0.09);
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 15px 15px 12px 15px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .video-col {
|
|
|
+ width: calc(50% - 11px);
|
|
|
+
|
|
|
+ .video-title {
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #343434;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ .circular {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-color: #6BA539;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-left: 6px;
|
|
|
+ text-align: right;
|
|
|
+ display: inline-grid;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 145px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-name {
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #343434;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|