Style(店铺):界面调整
This commit is contained in:
lifizer
@@ -0,0 +1,62 @@
|
|||||||
|
# skeleton
|
||||||
|
uni-app 骨架屏组件，用于数据加载时显示占位元素
|
||||||
|
|
||||||
|
## 属性说明
|
||||||
|
|
||||||
|
|属性名|类型|默认值|说明|
|
||||||
|
| -- | -- | --|--|
|
||||||
|
| loading | Boolean | true | 是否显示占位图 |
|
||||||
|
| showAvatar | Boolean | true | 是否显示头像占位图 |
|
||||||
|
| AvatarSize | String | 50px | 头像站占位图大小 |
|
||||||
|
| AvatarShape | String | round | 头像形状，可选值：round, square |
|
||||||
|
| showTitle | Boolean | true | 是否显示标题占位图 |
|
||||||
|
| titleWidth | String | 40% | 标题占位图宽度 |
|
||||||
|
| row | Number| 3 | 段落占位图行数 |
|
||||||
|
| animate | Boolean | true | 是否开启动画 |
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
```html
|
||||||
|
<skeleton
|
||||||
|
:loading="loading"
|
||||||
|
:avatarSize="skeleton1.avatarSize"
|
||||||
|
:row="skeleton1.row"
|
||||||
|
:showTitle="skeleton1.showTitle"
|
||||||
|
>
|
||||||
|
<view class="section-content">我是段落1</view>
|
||||||
|
</skeleton>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Skeleton from '../components/skeleton/index.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Skeleton
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
skeleton1 : {
|
||||||
|
avatarSize: '52px',
|
||||||
|
row: 3,
|
||||||
|
showTitle: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.reloadData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
reloadData() {
|
||||||
|
this.loading = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = false
|
||||||
|
}, 3000)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 效果图
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
v-if="loading"
|
||||||
|
:class="{ animate: animate }"
|
||||||
|
class="skeleton"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-if="showAvatar"
|
||||||
|
:class="[avatarShape]"
|
||||||
|
:style="{ width: avatarSize, height: avatarSize }"
|
||||||
|
class="skeleton-avatar"
|
||||||
|
/>
|
||||||
|
<view class="skeleton-content">
|
||||||
|
<view
|
||||||
|
v-if="showTitle"
|
||||||
|
:style="{ width: titleWidth }"
|
||||||
|
class="skeleton-title"
|
||||||
|
/>
|
||||||
|
<view class="skeleton-rows">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in rowList"
|
||||||
|
:key="index"
|
||||||
|
:style="{ width: item.width }"
|
||||||
|
class="skeleton-row-item"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else>
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const DEFAULT_ROW_WIDTH = '100%'
|
||||||
|
const DEFAULT_LAST_ROW_WIDTH = '70%'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showAvatar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
avatarSize: {
|
||||||
|
type: String,
|
||||||
|
default: '50px'
|
||||||
|
},
|
||||||
|
avatarShape: {
|
||||||
|
type: String,
|
||||||
|
default: 'round' // square | round
|
||||||
|
},
|
||||||
|
showTitle: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
titleWidth: {
|
||||||
|
type: String,
|
||||||
|
default: '40%'
|
||||||
|
},
|
||||||
|
row: {
|
||||||
|
type: Number,
|
||||||
|
default: 3
|
||||||
|
},
|
||||||
|
animate: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
rowList() {
|
||||||
|
const list = []
|
||||||
|
for (let i = 0; i < this.row; i++) {
|
||||||
|
list.push({
|
||||||
|
width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return list
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.skeleton {
|
||||||
|
display: flex;
|
||||||
|
padding: 16px;
|
||||||
|
--bg-color: #f2f3f5;
|
||||||
|
--row-height: 16px;
|
||||||
|
--row-margin-top: 16px;
|
||||||
|
}
|
||||||
|
.skeleton-avatar {
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: var(--bg-color);
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.skeleton-avatar.round {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-title {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
height: var(--row-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-title + .skeleton-rows {
|
||||||
|
margin-top: var(--row-margin-top);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-row-item {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
height: var(--row-height);
|
||||||
|
}
|
||||||
|
.skeleton-row-item:not(:first-child) {
|
||||||
|
margin-top: var(--row-margin-top);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton.animate {
|
||||||
|
animation: skeleton-blink 1.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes skeleton-blink {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+446
-407
@@ -10,244 +10,321 @@
|
|||||||
transparent="auto"
|
transparent="auto"
|
||||||
color='#ffffff'
|
color='#ffffff'
|
||||||
/>
|
/>
|
||||||
<view class="cover-box">
|
<view v-if="isLoad">
|
||||||
<image
|
<view class="cover-box">
|
||||||
v-if="inn.coverType === 1"
|
<image
|
||||||
:src="inn.cover"
|
v-if="inn.coverType === 1"
|
||||||
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"
|
:src="inn.cover"
|
||||||
:autoplay="true"
|
class="full-img"
|
||||||
:controls="false"
|
mode="widthFix"
|
||||||
:loop="true"
|
|
||||||
object-fit="contain"
|
|
||||||
play-btn-position="center"
|
|
||||||
class="video"
|
|
||||||
/>
|
/>
|
||||||
|
<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>
|
<view class="innInfoWrap">
|
||||||
<view class="innInfoWrap">
|
<view class="bg-color">
|
||||||
<view class="bg-color">
|
<view class="box-mask flex jc-between ai-end">
|
||||||
<view class="box-mask flex jc-between ai-end">
|
<view class="inn-name flex-0 more-t">{{ inn.name }}</view>
|
||||||
<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
|
<view
|
||||||
v-if="inn.cityName != undefined && inn.cityName.length > 0"
|
v-for="(item,index) in goodsList"
|
||||||
class="city-section flex jc-end ai-center"
|
:key="index"
|
||||||
|
class="item"
|
||||||
|
@click="goGoodsConByID(item)"
|
||||||
>
|
>
|
||||||
<image
|
<image
|
||||||
:src="webUrl + '/20210807215539157727.png'"
|
:src="item.image"
|
||||||
style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
|
class="cover"
|
||||||
/>
|
/>
|
||||||
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
|
<view class="">
|
||||||
</view>
|
<view class="name more-t">{{ item.storeName }}</view>
|
||||||
</view>
|
<view class="price-line flex ai-center">
|
||||||
</view>
|
<image
|
||||||
<view class="body-cont flex ai-end">
|
:src="webUrl + '/20221118104357701129.png'"
|
||||||
<view class="inn-logo flex-0">
|
class="label"
|
||||||
<image :src="inn.logo" v-if="inn.logo"></image>
|
mode="scaleToFill"
|
||||||
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
|
/>
|
||||||
</view>
|
<text>￥{{ item.price }}</text>
|
||||||
<view class="a3 flex jc-between ai-end" style="width: 100%">
|
</view>
|
||||||
<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>
|
||||||
<view class="flex flex-0 ai-end favorite-box">
|
<view class="sales-line flex ai-center">
|
||||||
<image
|
<image
|
||||||
v-if="isFavorite"
|
:src="webUrl + '/20221118092713277343.png'"
|
||||||
:src="webUrl + '/icon/icon-star-on.png'"
|
|
||||||
mode="scaleToFill"
|
|
||||||
class="icon"
|
class="icon"
|
||||||
@click="doneFavorite"
|
|
||||||
/>
|
|
||||||
<image
|
|
||||||
v-else
|
|
||||||
:src="webUrl + '/icon/icon-star-off.png'"
|
|
||||||
mode="scaleToFill"
|
mode="scaleToFill"
|
||||||
class="icon"
|
|
||||||
@click="doneFavorite"
|
|
||||||
/>
|
/>
|
||||||
<text>{{ favoriteCount }}</text>
|
<text>{{ item.sales }}人已购买</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<!-- 最新资讯 -->
|
||||||
</view>
|
<view
|
||||||
<view class="inn-signature-wrap">
|
v-if="activeIndex === 1"
|
||||||
<view class="triangle"></view>
|
class="info-section"
|
||||||
<view class="inn-signature">
|
>
|
||||||
{{ inn.content }}
|
<view v-if="infoArray.length > 0" class="info-wrapper">
|
||||||
</view>
|
<view class="info-list">
|
||||||
<view class="share-btn" @click="changeShare">
|
<view
|
||||||
<image :src="webUrl + '/page/hotel/share.png'" class="img" />
|
v-for="(item, index) in infoArray"
|
||||||
</view>
|
:key="index"
|
||||||
</view>
|
class="info-item"
|
||||||
<!-- <view
|
>
|
||||||
v-if="inn.desc != null && inn.desc.length > 0"
|
<view class="info-item-header" @click="infoClick(item)">
|
||||||
style="padding: 0 32rpx;margin-top: 30rpx;"
|
<view class="name one-t">
|
||||||
>
|
{{ item.name }}
|
||||||
<view class="desc-box">
|
</view>
|
||||||
<text class="fixed">简介：</text>
|
<view class="intro more-t">
|
||||||
<rich-text :nodes="inn.desc"/>
|
{{ item.intro }}
|
||||||
</view>
|
</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>
|
</view>
|
||||||
<view class="acea-row row-middle" style="margin-left: 20rpx;">
|
<view class="info-item-body">
|
||||||
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;"
|
<view v-if="item.type === 'NT_VIDEO'" class="video">
|
||||||
:src="webUrl + '/20230803151302213857.png'" mode=""></image>
|
<video
|
||||||
<text class="likeNum-txt">{{ info.zan }}</text>
|
: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>
|
</view>
|
||||||
<view class="time">{{ info.time }}</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<!-- 企业文化 -->
|
||||||
</view>
|
<view
|
||||||
<!-- 商家资质 -->
|
v-if="activeIndex === 2"
|
||||||
<view
|
class="pics-section"
|
||||||
v-if="activeIndex===2"
|
>
|
||||||
style="padding: 32rpx"
|
<view
|
||||||
>
|
v-if="inn.pics.length > 0"
|
||||||
<image
|
class="pics-list acea-row"
|
||||||
v-for="(item, index) in inn.qualifications"
|
>
|
||||||
:key="index"
|
<view
|
||||||
:src="item.image"
|
v-for="(url, index) in inn.pics"
|
||||||
class="store-img"
|
:key="index"
|
||||||
mode="widthFix"
|
:style="{ width: picColumnWidth }"
|
||||||
/>
|
class="pics-item"
|
||||||
</view>
|
@click="showPic(index)"
|
||||||
<!-- v4 商品列表 -->
|
>
|
||||||
<view v-if="activeIndex===3" class="goods-section flex flex-wrap">
|
<image
|
||||||
<view class="item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsConByID(item)">
|
:style="{
|
||||||
<img class="cover" :src="item.image" alt="">
|
width: picColumnWidth,
|
||||||
<view class="">
|
height: picColumnWidth,
|
||||||
<view class="name more-t">{{ item.storeName }}</view>
|
borderRadius: '8rpx'
|
||||||
<view class="price-line flex ai-center">
|
}"
|
||||||
<img class="label" :src="webUrl + '/20221118104357701129.png'" mode="scaleToFill">
|
:src="url"
|
||||||
<text>￥{{ item.price }}</text>
|
/>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="sales-line flex ai-center">
|
<!-- 商家资质 -->
|
||||||
<img class="icon" :src="webUrl + '/20221118092713277343.png'" mode="scaleToFill">
|
<view
|
||||||
<text>{{ item.sales }}人已购买</text>
|
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>
|
</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>
|
||||||
<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>
|
||||||
<view v-if="isMyInn" class="bottom-placeholder"></view>
|
<goo-skeleton v-else />
|
||||||
<!-- 分享 -->
|
<!-- 分享 -->
|
||||||
<u-popup
|
<u-popup
|
||||||
:show="showShare"
|
:show="showShare"
|
||||||
@@ -288,14 +365,17 @@ import {getUrlParam} from "@/utils/common.js";
|
|||||||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||||||
import cookie from "@/utils/store/cookie";
|
import cookie from "@/utils/store/cookie";
|
||||||
import {addStore, removeStore} from "@/api/favorite";
|
import {addStore, removeStore} from "@/api/favorite";
|
||||||
|
import GooSkeleton from '@/components/GooSkeleton/index.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
imgBox
|
imgBox,
|
||||||
|
GooSkeleton
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||||
|
isLoad: false,
|
||||||
isExpand: false,
|
isExpand: false,
|
||||||
activeIndex: 0,
|
activeIndex: 0,
|
||||||
page: 1,
|
page: 1,
|
||||||
@@ -325,7 +405,13 @@ export default {
|
|||||||
videoStyle: {
|
videoStyle: {
|
||||||
width: '750rpx',
|
width: '750rpx',
|
||||||
height: '500rpx'
|
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){} ，才能滑动显示背景
|
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
|
||||||
@@ -513,8 +599,9 @@ export default {
|
|||||||
// this.$yrouter.push('/pagesInn/inn/innProfileEdit');
|
// this.$yrouter.push('/pagesInn/inn/innProfileEdit');
|
||||||
},
|
},
|
||||||
//删除客栈动态
|
//删除客栈动态
|
||||||
deleteInnInfo: function (info) {
|
deleteInnInfo: function (info, index) {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
that.toggleMoreHandle(index)
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '确认删除此动态?',
|
title: '确认删除此动态?',
|
||||||
content: '',
|
content: '',
|
||||||
@@ -590,6 +677,7 @@ export default {
|
|||||||
info.year = formatDateTime(pt, 'yyyy');
|
info.year = formatDateTime(pt, 'yyyy');
|
||||||
info.monthDay = formatDateTime(pt, 'MM/dd');
|
info.monthDay = formatDateTime(pt, 'MM/dd');
|
||||||
info.time = formatDateTime(pt, 'HH:mm:ss');
|
info.time = formatDateTime(pt, 'HH:mm:ss');
|
||||||
|
info.showMore = false
|
||||||
return info;
|
return info;
|
||||||
}));
|
}));
|
||||||
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
||||||
@@ -618,12 +706,18 @@ export default {
|
|||||||
reqFn(that.id).then((res) => {
|
reqFn(that.id).then((res) => {
|
||||||
const { success, data } = res
|
const { success, data } = res
|
||||||
if (success) {
|
if (success) {
|
||||||
|
that.isLoad = true
|
||||||
that.inn = data
|
that.inn = data
|
||||||
that.isLike = data.zanVo !== null
|
that.isLike = data.zanVo !== null
|
||||||
that.isFavorite = data.hasFavorite
|
that.isFavorite = data.hasFavorite
|
||||||
that.favoriteCount = data.favoriteCount
|
that.favoriteCount = data.favoriteCount
|
||||||
that.inn.latitude = that.inn.latitude ? parseFloat(that.inn.latitude) : 24.993587
|
that.inn.latitude = that.inn.latitude ? parseFloat(that.inn.latitude) : 24.993587
|
||||||
that.inn.longitude = that.inn.longitude ? parseFloat(that.inn.longitude) : 102.779656
|
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-视频
|
// coverType: 1-图片,2-视频
|
||||||
if (data.coverType === 2) {
|
if (data.coverType === 2) {
|
||||||
uni.getSystemInfo({
|
uni.getSystemInfo({
|
||||||
@@ -773,6 +867,9 @@ export default {
|
|||||||
this.favoriteCount = res.data.favoriteCount
|
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">
|
<style scoped lang="less">
|
||||||
@import "@/assets/css/store.less";
|
@import "@/assets/css/store.less";
|
||||||
|
.my-inn-page {
|
||||||
|
padding: 0 0 100rpx 0;
|
||||||
|
}
|
||||||
.cover-box {
|
.cover-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@@ -998,29 +1097,6 @@ export default {
|
|||||||
.inn-tag-wrap {
|
.inn-tag-wrap {
|
||||||
margin-top: 10rpx;
|
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 {
|
.inn-signature-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 5;
|
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 {
|
.btLine {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 6rpx;
|
height: 6rpx;
|
||||||
margin-top: 18rpx;
|
margin-top: 18rpx;
|
||||||
background: #0DC5C5;
|
background: #0DC5C5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pics-box {
|
.pics-box {
|
||||||
margin: 36rpx;
|
margin: 36rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pics-list {
|
.pics-list {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 36rpx 0;
|
padding: 32rpx 0;
|
||||||
background-color: #fff;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pics-list .pics-item {
|
.pics-list .pics-item {
|
||||||
margin-left: 36rpx;
|
margin-left: 36rpx;
|
||||||
margin-top: 20rpx;
|
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 {
|
.bottom-view {
|
||||||
height: 86rpx;
|
|
||||||
line-height: 86rpx;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 2;
|
|
||||||
background: #FFFFFF;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
z-index: 99;
|
||||||
|
display: flex;
|
||||||
|
height: 70rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
border-top: 1px solid #f1f1f1;
|
||||||
|
background: #FFFFFF;
|
||||||
|
|
||||||
.bottom-btn {
|
.bottom-btn {
|
||||||
text-align: center;
|
display: flex;
|
||||||
font-size: 32rpx;
|
flex: 1;
|
||||||
color: #fff;
|
align-items: center;
|
||||||
background: #0DC5C5;
|
justify-content: center;
|
||||||
}
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
.bottom-placeholder {
|
line-height: 70rpx;
|
||||||
height: 86rpx;
|
&:first-child {
|
||||||
width: 100%;
|
border-right: 1px solid #d5d5d5;
|
||||||
}
|
}
|
||||||
|
.img {
|
||||||
.desc-box {
|
width: 40rpx;
|
||||||
/deep/ .fixed {
|
height: 40rpx;
|
||||||
font-size: 28rpx;
|
margin: 0 12rpx 0 0;
|
||||||
font-weight: bold;
|
}
|
||||||
line-height: 44rpx;
|
|
||||||
color: #0DC5C5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
font-size: 22rpx;
|
|
||||||
line-height: 40rpx;
|
|
||||||
color: #A6AAB3;
|
|
||||||
}
|
}
|
||||||
.tab-item-active {
|
.tab-item-active {
|
||||||
color:#080F1A;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user