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>
|
||||
+319
-280
@@ -10,6 +10,7 @@
|
||||
transparent="auto"
|
||||
color='#ffffff'
|
||||
/>
|
||||
<view v-if="isLoad">
|
||||
<view class="cover-box">
|
||||
<image
|
||||
v-if="inn.coverType === 1"
|
||||
@@ -103,15 +104,6 @@
|
||||
<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
|
||||
@@ -140,83 +132,177 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-tab acea-row row-middle row-center">
|
||||
<view
|
||||
class="top-tab acea-row row-middle row-center"
|
||||
style="margin-top: 60rpx;border-bottom: 1px solid #f5f5f5;"
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
:class="item.isShow ? '' : 'hide'"
|
||||
class="tab"
|
||||
@click="changeTab(item.value)"
|
||||
>
|
||||
<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>
|
||||
<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 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 :class="isMyInn ? 'my-inn-page' : ''">
|
||||
<!-- v4 商品列表 -->
|
||||
<view
|
||||
v-if="activeIndex === 0"
|
||||
class="goods-section flex flex-wrap"
|
||||
>
|
||||
<view
|
||||
v-for="(item,index) in goodsList"
|
||||
:key="index"
|
||||
class="item"
|
||||
@click="goGoodsConByID(item)"
|
||||
>
|
||||
<image
|
||||
:src="item.image"
|
||||
class="cover"
|
||||
/>
|
||||
<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="sales-line flex ai-center">
|
||||
<image
|
||||
:src="webUrl + '/20221118092713277343.png'"
|
||||
class="icon"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>{{ item.sales }}人已购买</text>
|
||||
</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
|
||||
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="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 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 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 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 v-else>
|
||||
<img-box
|
||||
:imgList="item.resources"
|
||||
:num="item.resources.length"
|
||||
:img-radius="10"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time">{{ info.time }}</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>
|
||||
<!-- 企业文化 -->
|
||||
<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
|
||||
v-if="activeIndex===2"
|
||||
style="padding: 32rpx"
|
||||
v-if="activeIndex === 3"
|
||||
class="qualifications-section"
|
||||
>
|
||||
<image
|
||||
v-for="(item, index) in inn.qualifications"
|
||||
@@ -226,28 +312,19 @@
|
||||
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>
|
||||
</view>
|
||||
<view class="sales-line flex ai-center">
|
||||
<img class="icon" :src="webUrl + '/20221118092713277343.png'" mode="scaleToFill">
|
||||
<text>{{ item.sales }}人已购买</text>
|
||||
</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 class="bottom-btn" @click="publishBtnClick">
|
||||
<image :src="webUrl + '/page/hotel/publish.png'" class="img" />
|
||||
发布动态
|
||||
</view>
|
||||
<view v-if="isMyInn" class="bottom-placeholder"></view>
|
||||
<view class="bottom-btn" @click="modifyBtnClick">
|
||||
<image :src="webUrl + '/page/hotel/edit.png'" class="img" />
|
||||
修改资料
|
||||
</view>
|
||||
</view>
|
||||
</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;
|
||||
.bottom-btn {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: 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;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user