liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style(店铺):界面调整

Browse Source
This commit is contained in:
lifizer
2024-03-20 11:14:57 +08:00
parent c96cae1087
commit 55784e489d
3 changed files with 653 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesInn/inn/innHome.vue
+446 -407
View File
@@ -10,244 +10,321 @@
transparent="auto"
color='#ffffff'
/>
<view class="cover-box">
<image
v-if="inn.coverType === 1"
:src="inn.cover"
class="full-img"
mode="widthFix"
/>
<view
v-if="inn.coverType === 2"
:style="{
'width': videoStyle.width,
'height': videoStyle.height
}"
class="video-box"
>
<video
<view v-if="isLoad">
<view class="cover-box">
<image
v-if="inn.coverType === 1"
:src="inn.cover"
:autoplay="true"
:controls="false"
:loop="true"
object-fit="contain"
play-btn-position="center"
class="video"
class="full-img"
mode="widthFix"
/>
<view
v-if="inn.coverType === 2"
:style="{
'width': videoStyle.width,
'height': videoStyle.height
}"
class="video-box"
>
<video
:src="inn.cover"
:autoplay="true"
:controls="false"
:loop="true"
object-fit="contain"
play-btn-position="center"
class="video"
/>
</view>
</view>
</view>
<view class="innInfoWrap">
<view class="bg-color">
<view class="box-mask flex jc-between ai-end">
<view class="inn-name flex-0 more-t">{{ inn.name }}</view>
<view class="innInfoWrap">
<view class="bg-color">
<view class="box-mask flex jc-between ai-end">
<view class="inn-name flex-0 more-t">{{ inn.name }}</view>
<view
v-if="inn.cityName != undefined && inn.cityName.length > 0"
class="city-section flex jc-end ai-center"
>
<image
:src="webUrl + '/20210807215539157727.png'"
style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
/>
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
</view>
</view>
</view>
<view class="body-cont flex ai-end">
<view class="inn-logo flex-0">
<image :src="inn.logo" v-if="inn.logo"></image>
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
</view>
<view class="a3 flex jc-between ai-end" style="width: 100%">
<view class="inn-owner" style="flex-grow: 1;">{{ inn.ownerName }}/店主</view>
<view v-if="inn.guaranteeValue" class="guarantee flex jc-center ai-center">
保证金：{{ inn.guaranteeValue }}元
</view>
<view class="flex ai-center zan-favorite-wrap">
<view class="zan-box flex flex-0 ai-end" @click="zanInn">
<template v-if="isLike">
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
<text class="on">{{ inn.zan }}</text>
</template>
<template v-else>
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
<text>{{ inn.zan }}</text>
</template>
</view>
<view class="flex flex-0 ai-end favorite-box">
<image
v-if="isFavorite"
:src="webUrl + '/icon/icon-star-on.png'"
mode="scaleToFill"
class="icon"
@click="doneFavorite"
/>
<image
v-else
:src="webUrl + '/icon/icon-star-off.png'"
mode="scaleToFill"
class="icon"
@click="doneFavorite"
/>
<text>{{ favoriteCount }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="inn-signature-wrap">
<view class="triangle"></view>
<view class="inn-signature">
{{ inn.content }}
</view>
<view class="share-btn" @click="changeShare">
<image :src="webUrl + '/page/hotel/share.png'" class="img" />
</view>
</view>
<view v-if="inn.name" class="map-wrapper">
<view class="map-cont">
<map
:longitude="inn.longitude"
:latitude="inn.latitude"
style="width: 750rpx;height: 300rpx;"
/>
</view>
<view class="bg"></view>
<view class="map-info">
<view class="map-info-hd">
<image :src="webUrl + '/page/hotel/icon-location.png'" class="icon" />
</view>
<view class="map-info-bd">
{{ inn.address }}
</view>
<view class="map-info-ft flex">
<view class="item" @click="showLocation">
<image :src="webUrl + '/page/hotel/navigation.png'" class="img" />
<view>导航</view>
</view>
<view class="item" @click="call">
<image :src="webUrl + '/page/hotel/phone.png'" class="img" />
<view>客服</view>
</view>
</view>
</view>
</view>
<view class="top-tab acea-row row-middle row-center">
<view
v-for="(item, index) in tabList"
:key="index"
:class="item.isShow ? '' : 'hide'"
class="tab"
@click="changeTab(item.value)"
>
<text :class="activeIndex === index ? 'tab-item-active' : 'tab-item-no-active'">
{{ item.text }}
</text>
<view v-show="activeIndex === index" class="btLine"></view>
</view>
</view>
<view :class="isMyInn ? 'my-inn-page' : ''">
<!-- v4 商品列表 -->
<view
v-if="activeIndex === 0"
class="goods-section flex flex-wrap"
>
<view
v-if="inn.cityName != undefined && inn.cityName.length > 0"
class="city-section flex jc-end ai-center"
v-for="(item,index) in goodsList"
:key="index"
class="item"
@click="goGoodsConByID(item)"
>
<image
:src="webUrl + '/20210807215539157727.png'"
style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
:src="item.image"
class="cover"
/>
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
</view>
</view>
</view>
<view class="body-cont flex ai-end">
<view class="inn-logo flex-0">
<image :src="inn.logo" v-if="inn.logo"></image>
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
</view>
<view class="a3 flex jc-between ai-end" style="width: 100%">
<view class="inn-owner" style="flex-grow: 1;">{{ inn.ownerName }}/店主</view>
<view v-if="inn.guaranteeValue" class="guarantee flex jc-center ai-center">
保证金：{{ inn.guaranteeValue }}元
</view>
<view class="flex ai-center zan-favorite-wrap">
<view class="zan-box flex flex-0 ai-end" @click="zanInn">
<template v-if="isLike">
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
<text class="on">{{ inn.zan }}</text>
</template>
<template v-else>
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
<text>{{ inn.zan }}</text>
</template>
<view class="">
<view class="name more-t">{{ item.storeName }}</view>
<view class="price-line flex ai-center">
<image
:src="webUrl + '/20221118104357701129.png'"
class="label"
mode="scaleToFill"
/>
<text>￥{{ item.price }}</text>
</view>
</view>
<view class="flex flex-0 ai-end favorite-box">
<view class="sales-line flex ai-center">
<image
v-if="isFavorite"
:src="webUrl + '/icon/icon-star-on.png'"
mode="scaleToFill"
:src="webUrl + '/20221118092713277343.png'"
class="icon"
@click="doneFavorite"
/>
<image
v-else
:src="webUrl + '/icon/icon-star-off.png'"
mode="scaleToFill"
class="icon"
@click="doneFavorite"
/>
<text>{{ favoriteCount }}</text>
<text>{{ item.sales }}人已购买</text>
</view>
</view>
</view>
</view>
</view>
<view class="inn-signature-wrap">
<view class="triangle"></view>
<view class="inn-signature">
{{ inn.content }}
</view>
<view class="share-btn" @click="changeShare">
<image :src="webUrl + '/page/hotel/share.png'" class="img" />
</view>
</view>
<!-- <view
v-if="inn.desc != null && inn.desc.length > 0"
style="padding: 0 32rpx;margin-top: 30rpx;"
>
<view class="desc-box">
<text class="fixed">简介：</text>
<rich-text :nodes="inn.desc"/>
</view>
</view> -->
<view v-if="inn.name" class="map-wrapper">
<view class="map-cont">
<map
:longitude="inn.longitude"
:latitude="inn.latitude"
style="width: 750rpx;height: 300rpx;"
/>
</view>
<view class="bg"></view>
<view class="map-info">
<view class="map-info-hd">
<image :src="webUrl + '/page/hotel/icon-location.png'" class="icon" />
</view>
<view class="map-info-bd">
{{ inn.address }}
</view>
<view class="map-info-ft flex">
<view class="item" @click="showLocation">
<image :src="webUrl + '/page/hotel/navigation.png'" class="img" />
<view>导航</view>
</view>
<view class="item" @click="call">
<image :src="webUrl + '/page/hotel/phone.png'" class="img" />
<view>客服</view>
</view>
</view>
</view>
</view>
<view
class="top-tab acea-row row-middle row-center"
style="margin-top: 60rpx;border-bottom: 1px solid #f5f5f5;"
>
<view class="tab" @click="changeTab(0)">
<text :class="activeIndex === 0 ? 'tab-item-active' : 'tab-item-no-active'">企业文化</text>
<view v-show="activeIndex === 0" class="btLine"></view>
</view>
<view class="tab" style="margin-left: 70rpx;" @click="changeTab(1)">
<text :class="activeIndex === 1 ? 'tab-item-active' : 'tab-item-no-active'">最新资讯</text>
<view v-show="activeIndex === 1" class="btLine"></view>
</view>
<view class="tab" style="margin-left: 70rpx;" @click="changeTab(2)">
<text :class="activeIndex === 2 ? 'tab-item-active' : 'tab-item-no-active'">商家资质</text>
<view v-show="activeIndex === 2" class="btLine"></view>
</view>
<view class="tab" style="margin-left: 70rpx;" @click="changeTab(3)" v-show="inn.hasProduct>0">
<text :class="activeIndex === 3 ? 'tab-item-active' : 'tab-item-no-active'">商品</text>
<view v-show="activeIndex === 3" class="btLine"></view>
</view>
</view>
<!-- 企业文化 -->
<view v-if="activeIndex===0" class="pics-section" style="position: relative;">
<view class="pics-list acea-row" v-if="inn.pics.length>0">
<view :style="{width:picColumnWidth}" @click="showPic(index)" class="pics-item" v-for="(url, index) in inn.pics"
:key="index">
<image :style="{width:picColumnWidth,height:picColumnWidth,borderRadius:'8rpx'}" :src="url" mode=""></image>
</view>
</view>
</view>
<!-- 最新资讯 -->
<view v-if="activeIndex===1" class="info-section" style="position: relative;">
<view class="info-list acea-row row-column" v-if="infoArray.length>0">
<view class="pics-item acea-row" style="flex-wrap: nowrap;" v-for="(info, index) in infoArray" :key="index">
<view class="date-block" style="flex-shrink: 0;">
<view class="month-day" :style="index===0?'color:#0DC5C5;':''">{{ info.monthDay }}</view>
<view class="year">{{ info.year }}</view>
<view v-if="isMyInn" class="" style="margin-top: 10rpx;" @click="deleteInnInfo(info)">
<image style="width:36rpx;height: 36rpx;" :src="webUrl + '/20210302150736618877.png'" mode=""></image>
</view>
</view>
<view class="separator-block acea-row row-column row-middle" style="flex-shrink: 0;">
<view :class="['dot',index===0?'first-cell':'']" style="flex-shrink: 0;"></view>
<view v-if="(index+1)!==infoArray.length" class="dash-line" style="flex-grow: 1;"></view>
</view>
<view class="info-card" style="flex-grow: 1;">
<view class="info-title line1" @click="infoClick(info)">{{ info.name }}</view>
<view v-if="info.type==='NT_VIDEO'" style="width: 100%;margin-top: 10rpx;">
<video style="width: 100%;height: 264rpx;" :src="info.video" controls play-btn-position="center"/>
</view>
<template v-else>
<img-box style="width: 100%;" :imgList='info.resources' :num='info.resources.length'></img-box>
</template>
<view class="info-media-wrap acea-row row-middle row-between" style="margin-top: 10rpx;"
@click="infoClick(info)">
<view class="acea-row row-middle">
<view class="acea-row row-middle">
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;"
:src="webUrl + '/20230803152147141807.png'"/>
<text class="seeNum-txt">{{ info.pv }}</text>
<!-- 最新资讯 -->
<view
v-if="activeIndex === 1"
class="info-section"
>
<view v-if="infoArray.length > 0" class="info-wrapper">
<view class="info-list">
<view
v-for="(item, index) in infoArray"
:key="index"
class="info-item"
>
<view class="info-item-header" @click="infoClick(item)">
<view class="name one-t">
{{ item.name }}
</view>
<view class="intro more-t">
{{ item.intro }}
</view>
</view>
<view class="acea-row row-middle" style="margin-left: 20rpx;">
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;"
:src="webUrl + '/20230803151302213857.png'" mode=""></image>
<text class="likeNum-txt">{{ info.zan }}</text>
<view class="info-item-body">
<view v-if="item.type === 'NT_VIDEO'" class="video">
<video
:src="item.video"
:poster="item.video + '?vframe/jpg/offset/1'"
controls
play-btn-position="center"
class="video-item"
/>
</view>
<view v-else>
<img-box
:imgList="item.resources"
:num="item.resources.length"
:img-radius="10"
style="width: 100%;"
/>
</view>
</view>
<view class="info-item-bottom">
<view class="time">
{{ item.createdTime ? item.createdTime.replace(/-/g, '.').substr(0, 10) : '' }}
</view>
<view class="btns">
<view class="flex">
<image
:src="webUrl + '/20230803152147141807.png'"
class="icon"
/>
<text class="seeNum-txt">{{ item.pv }}</text>
</view>
<view class="flex">
<image
:src="webUrl + '/20230803151302213857.png'"
class="icon"
/>
<text class="seeNum-txt">{{ item.zan }}</text>
</view>
<view v-if="isMyInn" class="flex more-btn" @click="toggleMoreHandle(index)">
<image
:src="webUrl + '/page/hotel/more.png'"
class="icon"
/>
<view
v-if="item.showMore"
class="more-wrapper"
>
<view class="more-item">
<image
:src="webUrl + '/page/hotel/settop.png'"
class="more-icon"
/>
置顶动态
</view>
<view class="more-item" @click="deleteInnInfo(item, index)">
<image
:src="webUrl + '/page/hotel/delete.png'"
class="more-icon"
/>
删除动态
</view>
</view>
</view>
</view>
</view>
</view>
<view class="time">{{ info.time }}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 商家资质 -->
<view
v-if="activeIndex===2"
style="padding: 32rpx"
>
<image
v-for="(item, index) in inn.qualifications"
:key="index"
:src="item.image"
class="store-img"
mode="widthFix"
/>
</view>
<!-- v4 商品列表 -->
<view v-if="activeIndex===3" class="goods-section flex flex-wrap">
<view class="item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsConByID(item)">
<img class="cover" :src="item.image" alt="">
<view class="">
<view class="name more-t">{{ item.storeName }}</view>
<view class="price-line flex ai-center">
<img class="label" :src="webUrl + '/20221118104357701129.png'" mode="scaleToFill">
<text>￥{{ item.price }}</text>
<!-- 企业文化 -->
<view
v-if="activeIndex === 2"
class="pics-section"
>
<view
v-if="inn.pics.length > 0"
class="pics-list acea-row"
>
<view
v-for="(url, index) in inn.pics"
:key="index"
:style="{ width: picColumnWidth }"
class="pics-item"
@click="showPic(index)"
>
<image
:style="{
width: picColumnWidth,
height: picColumnWidth,
borderRadius: '8rpx'
}"
:src="url"
/>
</view>
</view>
</view>
<view class="sales-line flex ai-center">
<img class="icon" :src="webUrl + '/20221118092713277343.png'" mode="scaleToFill">
<text>{{ item.sales }}人已购买</text>
<!-- 商家资质 -->
<view
v-if="activeIndex === 3"
class="qualifications-section"
>
<image
v-for="(item, index) in inn.qualifications"
:key="index"
:src="item.image"
class="store-img"
mode="widthFix"
/>
</view>
</view>
<view v-if="isMyInn" class="bottom-view acea-row">
<view class="bottom-btn" @click="publishBtnClick">
<image :src="webUrl + '/page/hotel/publish.png'" class="img" />
发布动态
</view>
<view class="bottom-btn" @click="modifyBtnClick">
<image :src="webUrl + '/page/hotel/edit.png'" class="img" />
修改资料
</view>
</view>
<view v-if="isMyInn" class="bottom-view acea-row">
<view class="bottom-btn" style="margin-right: 1px; flex: 1;" @click="publishBtnClick">发布动态</view>
<view class="bottom-btn" style="flex: 1;" @click="modifyBtnClick">修改资料</view>
</view>
<view v-if="isMyInn" class="bottom-placeholder"></view>
<goo-skeleton v-else />
<!-- 分享 -->
<u-popup
:show="showShare"
@@ -288,14 +365,17 @@ import {getUrlParam} from "@/utils/common.js";
import imgBox from '@/components/imageTypeSet/imagebox.vue'
import cookie from "@/utils/store/cookie";
import {addStore, removeStore} from "@/api/favorite";
import GooSkeleton from '@/components/GooSkeleton/index.vue'
export default {
components: {
imgBox
imgBox,
GooSkeleton
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
isLoad: false,
isExpand: false,
activeIndex: 0,
page: 1,
@@ -325,7 +405,13 @@ export default {
videoStyle: {
width: '750rpx',
height: '500rpx'
}
},
tabList: [
{ text: '精选商品', value: 0, isShow: true },
{ text: '最新资讯', value: 1, isShow: true },
{ text: '企业文化', value: 2, isShow: true },
{ text: '商家资质', value: 3, isShow: true }
]
}
},
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
@@ -513,8 +599,9 @@ export default {
// this.$yrouter.push('/pagesInn/inn/innProfileEdit');
},
//删除客栈动态
deleteInnInfo: function (info) {
deleteInnInfo: function (info, index) {
let that = this;
that.toggleMoreHandle(index)
uni.showModal({
title: '确认删除此动态?',
content: '',
@@ -590,6 +677,7 @@ export default {
info.year = formatDateTime(pt, 'yyyy');
info.monthDay = formatDateTime(pt, 'MM/dd');
info.time = formatDateTime(pt, 'HH:mm:ss');
info.showMore = false
return info;
}));
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
@@ -618,12 +706,18 @@ export default {
reqFn(that.id).then((res) => {
const { success, data } = res
if (success) {
that.isLoad = true
that.inn = data
that.isLike = data.zanVo !== null
that.isFavorite = data.hasFavorite
that.favoriteCount = data.favoriteCount
that.inn.latitude = that.inn.latitude ? parseFloat(that.inn.latitude) : 24.993587
that.inn.longitude = that.inn.longitude ? parseFloat(that.inn.longitude) : 102.779656
// 该店铺无商品则不显示“精选商品”
if (data.hasProduct <= 0) {
that.activeIndex = 1
that.tabList[0].isShow = false
}
// coverType: 1-图片,2-视频
if (data.coverType === 2) {
uni.getSystemInfo({
@@ -773,6 +867,9 @@ export default {
this.favoriteCount = res.data.favoriteCount
}
}
},
toggleMoreHandle(index) {
this.$set(this.infoArray[index], 'showMore', !this.infoArray[index].showMore)
}
}
}
@@ -811,7 +908,9 @@ export default {
<style scoped lang="less">
@import "@/assets/css/store.less";
.my-inn-page {
padding: 0 0 100rpx 0;
}
.cover-box {
position: relative;
@@ -998,29 +1097,6 @@ export default {
.inn-tag-wrap {
margin-top: 10rpx;
}
.zanmost-tag {
padding: 2rpx 8rpx 2rpx 8rpx;
background: #FF2D69;
font-size: 10*2rpx;
color: #FFFFFF;
margin-right: 8rpx;
}
.latest-tag {
padding: 2rpx 8rpx 2rpx 8rpx;
background: #0DC5C5;
font-size: 10*2rpx;
color: #FFFFFF;
margin-right: 8rpx;
}
.location-tag {
padding: 2rpx 8rpx 2rpx 8rpx;
background: #FD685D;
font-size: 10*2rpx;
color: #FFFFFF;
}
.inn-signature-wrap {
position: relative;
z-index: 5;
@@ -1055,200 +1131,54 @@ export default {
}
}
}
.inn-intro-bold {
font-size: 28rpx;
color: #0DC5C5;
}
.inn-intro {
font-size: 22rpx;
color: #A6AAB3;
}
.map-wrap {
padding: 0 32rpx;
position: relative;
margin-top: 40rpx;
}
.address-block {
position: absolute;
top: 20rpx;
left: 56rpx;
}
.address-text {
font-size: 24rpx;
color: #41454D;
}
.phone-block {
padding-left: 40rpx;
padding-right: 40rpx;
}
.map-block {
padding-left: 40rpx;
padding-right: 40rpx;
}
.vline {
width: 0px;
margin-left: 20rpx;
margin-right: 20rpx;
height: 32rpx;
border: 1px solid #DADCE0;
}
.buttons-block {
background: #FFFFFF;
height: 80rpx;
box-shadow: 0px 6rpx 16rpx rgba(205, 214, 214, 0.6);
border-radius: 12rpx;
// width: 263*2rpx;
padding: 0 20rpx;
position: absolute;
margin: 0 auto;
bottom: -40rpx;
}
.btLine {
width: 100%;
height: 6rpx;
margin-top: 18rpx;
background: #0DC5C5;
}
.pics-box {
margin: 36rpx;
background: #fff;
}
.pics-list {
position: relative;
margin: 36rpx 0;
background-color: #fff;
padding: 32rpx 0;
flex-wrap: wrap;
}
.pics-list .pics-item {
margin-left: 36rpx;
margin-top: 20rpx;
}
.info-section {
padding: 36rpx;
}
.info-list {
width: 100%;
}
.separator-block {
padding: 10rpx;
margin: 0 20rpx;
}
.info-card {
width: 500rpx;
box-sizing: border-box;
margin-bottom: 40rpx;
padding: 24rpx;
border-radius: 8rpx;
background: #EBECF0;
overflow-x: hidden;
}
.info-title {
font-size: 24rpx;
color: #080F1A;
}
.time {
font-size: 22rpx;
color: #A6AAB3;
}
.month-day {
font-size: 28rpx;
color: #41454D;
}
.year {
font-size: 20rpx;
color: #DADCE0;
margin-top: 10rpx;
}
.dot {
width: 12rpx;
height: 12rpx;
background: #080F1A;
border-radius: 50%;
opacity: 1;
}
.first-cell {
background: #0DC5C5;
}
.dash-line {
width: 0px;
border: 1px dashed #DADCE0;
opacity: 1;
margin-top: 10rpx;
margin-bottom: 0rpx;
}
.seeNum-txt {
font-size: 22rpx;
color: #080F1A;
}
.likeNum-txt {
font-size: 22rpx;
color: #080F1A;
}
.bottom-view {
height: 86rpx;
line-height: 86rpx;
position: fixed;
left: 0;
right: 0;
z-index: 2;
background: #FFFFFF;
bottom: 0;
}
z-index: 99;
display: flex;
height: 70rpx;
padding: 15rpx;
border-top: 1px solid #f1f1f1;
background: #FFFFFF;
.bottom-btn {
text-align: center;
font-size: 32rpx;
color: #fff;
background: #0DC5C5;
}
.bottom-placeholder {
height: 86rpx;
width: 100%;
}
.desc-box {
/deep/ .fixed {
font-size: 28rpx;
font-weight: bold;
line-height: 44rpx;
color: #0DC5C5;
.bottom-btn {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #333;
line-height: 70rpx;
&:first-child {
border-right: 1px solid #d5d5d5;
}
.img {
width: 40rpx;
height: 40rpx;
margin: 0 12rpx 0 0;
}
}
font-size: 22rpx;
line-height: 40rpx;
color: #A6AAB3;
}
.tab-item-active {
color:#080F1A;
@@ -1319,4 +1249,113 @@ export default {
}
}
}
.top-tab {
margin: 60rpx 0 0 0;
border-bottom: 1px solid #ddd;
.tab {
margin: 0 35rpx;
&.hide {
display: none;
}
}
}
.info-section,
.pics-section,
.qualifications-section {
position: relative;
background-color: #f6f6f6;
}
.info-section,
.qualifications-section {
padding: 32rpx;
}
.info-section {
.info-item + .info-item {
margin: 32rpx 0 0 0;
}
.info-item {
border-radius: 10rpx;
background-color: #fff;
.info-item-header {
position: relative;
padding: 20rpx 20rpx 0 20rpx;
.name {
font-size: 16px;
color: #333;
font-weight: bold;
}
.intro {
margin: 10rpx 0 0 0;
color: #666;
font-size: 14px;
}
}
.info-item-body {
padding: 0 20rpx 20rpx 20rpx;
.video {
padding: 20rpx 0 0 0;
.video-item {
width: 100%;
height: 400rpx;
border-radius: 10rpx;
}
}
}
.info-item-bottom {
display: flex;
align-items: center;
padding: 20rpx;
border-top: 1px solid #f1f1f1;
font-size: 16px;
.time {
flex: 1;
color: #333;
}
.btns {
display: flex;
color: #999;
.flex + .flex {
margin: 0 0 0 32rpx;
}
.flex {
align-items: center;
}
.icon {
width: 32rpx;
height: 32rpx;
margin: 0 8rpx 0 0;
}
.more-btn {
position: relative;
.more-wrapper {
position: absolute;
right: -20rpx;
top: -150rpx;
z-index: 5;
width: 200rpx;
border-radius: 12rpx;
background-color: #fff;
box-shadow: 0px 1px 6px rgba(0,0,0,0.16);
.more-item {
display: flex;
align-items: center;
justify-content: center;
height: 70rpx;
font-size: 14px;
color: #333;
&:first-child {
border-bottom: 1px solid #d5d5d5;
}
.more-icon {
width: 36rpx;
height: 36rpx;
margin: 0 10rpx 0 0;
}
}
}
}
}
}
}
}
</style>