|
@@ -1,129 +1,91 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <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>
|
|
|
+ <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}}
|
|
|
<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 {
|
|
|
- liveTelecast: null,
|
|
|
- shortVideo: null,
|
|
|
- advertList: [],
|
|
|
- discountList: [],
|
|
|
- triggered: false,
|
|
|
- goodsList: [],
|
|
|
+ wxLoginData: null,
|
|
|
+ wxPhoneData: null,
|
|
|
+ userNmae: '',
|
|
|
+ timer: false,
|
|
|
+ tipxx: '',
|
|
|
}
|
|
|
},
|
|
|
- onLoad() {
|
|
|
- },
|
|
|
- onReady(){
|
|
|
- this.getBaseInfo()
|
|
|
+ onReady() {
|
|
|
this.appLoginWx()
|
|
|
setTimeout(() => {
|
|
|
- this.triggered = true;
|
|
|
- }, 1000)
|
|
|
+ this.timer = true
|
|
|
+ }, 10)
|
|
|
},
|
|
|
methods: {
|
|
|
+ getPhoneNumber(e) {
|
|
|
+ if (this.wxLoginData && this.timer) {
|
|
|
+ let _that = this
|
|
|
+ wx.checkSession({
|
|
|
+ success(res) {
|
|
|
+ _that.tipxx = '未过期'
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ _that.tipxx = '已过期'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ uni.setStorage({
|
|
|
+ key: 'wxPhoneData',
|
|
|
+ data: {
|
|
|
+ encryptedData2: e.detail.encryptedData,
|
|
|
+ iv2: e.detail.iv,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.wxPhoneData = uni.getStorageSync("wxPhoneData")
|
|
|
+ } else {
|
|
|
+ this.$refs.uTips.show({
|
|
|
+ title: '请先等待角色信息获取完成',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
// 获取个人数据
|
|
|
- getUserInfo(info) {
|
|
|
- NET.request(API.WxLogin, uni.getStorageSync("wxLoginData"), 'POST').then(res => {
|
|
|
- console.log(res)
|
|
|
+ getUserInfo() {
|
|
|
+ NET.request(API.WxLogin, {
|
|
|
+ ...this.wxLoginData,
|
|
|
+ // ...this.wxPhoneData,
|
|
|
+ }, 'POST').then(res => {
|
|
|
uni.setStorage({
|
|
|
key: 'token',
|
|
|
data: res.data.token
|
|
|
- });
|
|
|
+ })
|
|
|
uni.setStorage({
|
|
|
key: 'userData',
|
|
|
data: {
|
|
|
- headImage: info.userInfo.avatarUrl,
|
|
|
+ headImage: JSON.parse(this.wxLoginData.rawData).avatarUrl,
|
|
|
userName: res.data.name,
|
|
|
userId: res.data.userId,
|
|
|
}
|
|
|
- });
|
|
|
- this.getBaseInfo()
|
|
|
+ })
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/home'
|
|
|
+ })
|
|
|
}).catch(error => {
|
|
|
this.$refs.uTips.show({
|
|
|
title: '微信登录授权失败',
|
|
@@ -152,10 +114,15 @@
|
|
|
rawData: info.rawData,
|
|
|
signature: info.signature,
|
|
|
}
|
|
|
- });
|
|
|
- this.getUserInfo(info)
|
|
|
+ })
|
|
|
+ this.wxLoginData = uni.getStorageSync("wxLoginData")
|
|
|
+ this.userNmae = JSON.parse(this.wxLoginData.rawData).nickName
|
|
|
+ this.$refs.uTips.show({
|
|
|
+ title: '获取角色信息成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
},
|
|
|
- fail: () => {
|
|
|
+ fail: (error) => {
|
|
|
this.$refs.uTips.show({
|
|
|
title: '微信登录授权失败',
|
|
|
type: 'warning',
|
|
@@ -179,364 +146,103 @@
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- // 查询数据
|
|
|
- getBaseInfo(){
|
|
|
- NET.request(API.getAdvert, {}, 'GET').then(res => {
|
|
|
- this.advertList = res.data
|
|
|
- }).catch(error => {
|
|
|
- this.$refs.uTips.show({
|
|
|
- title: '获取广告列表失败',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- })
|
|
|
- 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',
|
|
|
- })
|
|
|
- })
|
|
|
- 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',
|
|
|
- })
|
|
|
- })
|
|
|
- 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: '获取猜你喜欢商品列表失败',
|
|
|
- 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 {
|
|
|
- background-size: 128px 124px;
|
|
|
- background-position: center 510px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-image: url(@/static/images/indexBg.png);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ position: absolute;
|
|
|
|
|
|
- .search {
|
|
|
+ .authorize-bg {
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
position: absolute;
|
|
|
- z-index: 10;
|
|
|
-
|
|
|
- .uni-searchbar {
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
|
|
|
- .swiper {
|
|
|
- height: 175px;
|
|
|
- background-color: #6CA63A;
|
|
|
+ .logo {
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
+ float: left;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 40px;
|
|
|
+ transform: translateX(-50%);
|
|
|
}
|
|
|
|
|
|
- .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);
|
|
|
-
|
|
|
- .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);
|
|
|
+ .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-button {
|
|
|
- width: 96px;
|
|
|
- height: 72px;
|
|
|
- padding-top: 60px;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
+ .button-text {
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
font-size: 15px;
|
|
|
font-family: PingFang SC;
|
|
|
- color: #52A63A;
|
|
|
- line-height: 12px;
|
|
|
- background-size: 50px;
|
|
|
- background-position: center top;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- .caizhai {
|
|
|
- background-image: url(@/static/images/caizhai.png);
|
|
|
+ color: #FEFEFE;
|
|
|
+ margin-right: 4px;
|
|
|
}
|
|
|
|
|
|
- .zhongzhi {
|
|
|
- background-image: url(@/static/images/zhongzhi.png);
|
|
|
- }
|
|
|
-
|
|
|
- .paimai {
|
|
|
- background-image: url(@/static/images/paimai.png);
|
|
|
+ .iconfont {
|
|
|
+ float: left;
|
|
|
+ color: #FEFEFE;
|
|
|
+ font-size: 28px;
|
|
|
+ line-height: 30px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .index-title {
|
|
|
- width: calc(100% - 24px);
|
|
|
- border-left: 1px solid #6CA63A;
|
|
|
- padding: 2px 0 2px 5px;
|
|
|
- margin: 15px 12px 10px 12px;
|
|
|
|
|
|
- .title-text {
|
|
|
- height: 20px;
|
|
|
- margin-bottom: 2px;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 15px;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #6CA63A;
|
|
|
+ .authorize-button:after {
|
|
|
+ border: none;
|
|
|
}
|
|
|
|
|
|
- .title-tip {
|
|
|
- height: 14px;
|
|
|
- line-height: 14px;
|
|
|
+ .authorize-info {
|
|
|
+ width: 230px;
|
|
|
+ height: 36px;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ border-bottom: 1px solid #FFFFFF;
|
|
|
font-size: 12px;
|
|
|
font-family: PingFang SC;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content-box {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .discount-col {
|
|
|
- width: calc(50% - 6px);
|
|
|
- background: #FFFFFF;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
+ color: #FEFEFE;
|
|
|
+ line-height: 36px;
|
|
|
}
|
|
|
|
|
|
- .goods-row {
|
|
|
- width: calc(100% - 24px);
|
|
|
- height: 104px;
|
|
|
- margin: 6px 0 12px 12px;
|
|
|
+ .authorize-login {
|
|
|
+ width: 220px;
|
|
|
+ height: 36px;
|
|
|
+ float: left;
|
|
|
+ margin: 10px 5px;
|
|
|
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;
|
|
|
- }
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #52A63A;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|