Commit 3c2f121d authored by 黄奎's avatar 黄奎

页面修改

parent a178484a
...@@ -216,7 +216,22 @@ ...@@ -216,7 +216,22 @@
@click="goOnAdd()">继续添加联系人</view> @click="goOnAdd()">继续添加联系人</view>
</view> </view>
</template> </template>
<view style="font-size: 16px;margin-top: 52rpx;font-weight: 600;">2021中国(成都)首店经济发展大会疫情防控提醒</view>
<view style="font-size:13px !important;margin-top: 24rpx;">
1、本次大会不接待14天内有国内中高风险地区旅居史人员;
</view>
<view style="font-size:13px !important;margin-top: 24rpx;">
2、省外参会人员需持72小时以内的核酸检测阴性证明报告;
</view>
<view style="font-size:13px !important;margin-top: 24rpx;">
3、请佩戴口罩、测温、扫场所码,出示绿码进入会场。
</view>
<view style="font-size:13px !important;margin-top: 24rpx;">
谢谢配合
</view>
</view> </view>
<view> <view>
<view class="ac_upBtn" style="width:90%;margin:25rpx auto" @click="goSignUp()">提交</view> <view class="ac_upBtn" style="width:90%;margin:25rpx auto" @click="goSignUp()">提交</view>
</view> </view>
......
<template> <template>
<view <view style="
style="
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
" ">
<scroll-view scroll-y="true" style="height: 100%" @scroll="scroll" v-if='details'>
> <view class="bg-red">
<scroll-view scroll-y="true" style="height: 100%" @scroll="scroll" v-if='details'> <view class="detail-box">
<view class="bg-red"> <view class="header flex" style="popsition: relative">
<view class="detail-box"> <view class="title" style="display: flex; align-items: flex-end">
<view class="header flex" style="popsition: relative"> {{ details.BrandName }}
<view class="title" style="display: flex; align-items: flex-end">
{{ details.BrandName }} <view v-for="(item, index) in details.PrizeList" :key="index" class="screenBoxItem" @click="chooseYear(item)">
<view class="screenBoxItemYear activeYear">{{ item.YearInfo
<view }}</view>
v-for="(item, index) in details.PrizeList" <view class="screenBoxItemName activeName">{{
:key="index"
class="screenBoxItem"
@click="chooseYear(item)"
>
<view class="screenBoxItemYear activeYear">{{
item.YearInfo
}}</view
><view class="screenBoxItemName activeName">{{
item.Name item.Name
}}</view> }}</view>
</view> </view>
</view> </view>
<!-- 关注 --> <!-- 关注 -->
<view <view style="
style="
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
margin-left: 12rpx; margin-left: 12rpx;
...@@ -41,145 +31,61 @@ ...@@ -41,145 +31,61 @@
top: 0; top: 0;
right: 50rpx; right: 50rpx;
" "
@click="follow" @click="follow">
> <image v-if="details.CollectId == 0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png"
<image style="width: 100%; height: 100%"></image>
v-if="details.CollectId == 0" <image v-if="details.CollectId > 0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_370.png"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png" style="width: 100%; height: 100%"></image>
style="width: 100%; height: 100%" </view>
></image> </view>
<image <view class="score-box flex item-center" v-if="details.OpenShopWish != -1">
v-if="details.CollectId > 0" <u-rate :current="details.OpenShopWish" :count="5" :size="25" active-icon="star" active-color="#F30329" :disabled="true"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_370.png" inactive-color="#b2b2b2" class="rate"></u-rate>
style="width: 100%; height: 100%" <text class="score">{{ details.OpenShopWish ? details.OpenShopWish : "0" }}</text>
></image> <text class="desire">开店意愿</text>
</view> </view>
</view> <view v-if="details.OpenShopWish == -1">
<view <text class="desire">无开店意愿</text>
class="score-box flex item-center" </view>
v-if="details.OpenShopWish != -1" <view style="width: 100%">
> <view v-if="!details.VideoUrl || details.VideoUrl == ''" class="img-box">
<u-rate <view v-if="details.BannerList.length == 1" v-for="(src, index) in details.BannerList" :key="index" style="width: 100%; height: 226rpx">
:current="details.OpenShopWish" <image :src="src" style="width: 100%; height: 100%; border-radius: 20rpx" mode="aspectFill" @click="previewImage(0)"></image>
:count="5" </view>
:size="25" <view v-if="details.BannerList.length == 2" v-for="(src, index) in details.BannerList" :key="index" style="width: calc((100vw - 80rpx - 10rpx) / 2); height: 226rpx">
active-icon="star" <image :src="src" v-if="index == 0" style="
active-color="#F30329"
:disabled="true"
inactive-color="#b2b2b2"
class="rate"
></u-rate>
<text class="score"
>{{ details.OpenShopWish ? details.OpenShopWish : "0" }}</text
>
<text class="desire">开店意愿</text>
</view>
<view v-if="details.OpenShopWish == -1">
<text class="desire">无开店意愿</text>
</view>
<view style="width: 100%">
<view
v-if="!details.VideoUrl || details.VideoUrl == ''"
class="img-box"
>
<view
v-if="details.BannerList.length == 1"
v-for="(src, index) in details.BannerList"
:key="index"
style="width: 100%; height: 226rpx"
>
<image
:src="src"
style="width: 100%; height: 100%; border-radius: 20rpx"
mode="aspectFill"
@click="previewImage(0)"
></image>
</view>
<view
v-if="details.BannerList.length == 2"
v-for="(src, index) in details.BannerList"
:key="index"
style="width: calc((100vw - 80rpx - 10rpx) / 2); height: 226rpx"
>
<image
:src="src"
v-if="index == 0"
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 20rpx 0 0 20rpx; border-radius: 20rpx 0 0 20rpx;
" "
mode="aspectFill" mode="aspectFill" @click="previewImage(index)"></image>
@click="previewImage(index)" <image :src="src" v-if="index == 1" style="
></image>
<image
:src="src"
v-if="index == 1"
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0 20rpx 20rpx 0; border-radius: 0 20rpx 20rpx 0;
" "
mode="aspectFill" mode="aspectFill" @click="previewImage(index)"></image>
@click="previewImage(index)" </view>
></image> <view v-for="(src, index) in details.BannerList" :key="index" v-if="details.BannerList.length > 2" style="height: 226rpx">
</view> <image :src="src" class="img" mode="aspectFill" v-if="index == 0" @click="previewImage(index)" style="border-radius: 20rpx 0 0 20rpx"></image>
<view <image :src="src" class="img" mode="aspectFill" v-if="index == 1" @click="previewImage(index)"></image>
v-for="(src, index) in details.BannerList" <image :src="src" class="img" mode="aspectFill" v-if="index == 2" @click="previewImage(index)" style="border-radius: 0 20rpx 20rpx 0"></image>
:key="index" </view>
v-if="details.BannerList.length > 2" </view>
style="height: 226rpx" <view v-else>
> <view v-if="details.BannerList.length == 1" class="img-box">
<image <view style="
:src="src"
class="img"
mode="aspectFill"
v-if="index == 0"
@click="previewImage(index)"
style="border-radius: 20rpx 0 0 20rpx"
></image>
<image
:src="src"
class="img"
mode="aspectFill"
v-if="index == 1"
@click="previewImage(index)"
></image>
<image
:src="src"
class="img"
mode="aspectFill"
v-if="index == 2"
@click="previewImage(index)"
style="border-radius: 0 20rpx 20rpx 0"
></image>
</view>
</view>
<view v-else>
<view v-if="details.BannerList.length == 1" class="img-box">
<view
style="
width: calc((100vw - 80rpx - 10rpx) / 2); width: calc((100vw - 80rpx - 10rpx) / 2);
height: 226rpx; height: 226rpx;
position: relative; position: relative;
" ">
> <video id="myVideo" :src="details.VideoUrl" style="
<video
id="myVideo"
:src="details.VideoUrl"
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 20rpx 0 0 20rpx; border-radius: 20rpx 0 0 20rpx;
" "
:controls="controls" :controls="controls" :show-center-play-btn="false" :show-fullscreen-btn="false" @fullscreenchange="brandvideoControl"></video>
:show-center-play-btn="false" <view @click="enlarge(details.VideoUrl)" style="
:show-fullscreen-btn="false"
@fullscreenchange="brandvideoControl"
></video>
<view
@click="enlarge(details.VideoUrl)"
style="
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -192,59 +98,36 @@ ...@@ -192,59 +98,36 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
" ">
> <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
<image style="width: 37rpx; height: 44rpx" mode=""></image>
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png" </view>
style="width: 37rpx; height: 44rpx" </view>
mode="" <view v-for="(src, index) in details.BannerList" :key="index" style="
></image>
</view>
</view>
<view
v-for="(src, index) in details.BannerList"
:key="index"
style="
width: calc((100vw - 80rpx - 10rpx) / 2); width: calc((100vw - 80rpx - 10rpx) / 2);
height: 226rpx; height: 226rpx;
" ">
> <image :src="src" style="
<image
:src="src"
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0 20rpx 20rpx 0; border-radius: 0 20rpx 20rpx 0;
" "
mode="aspectFill" mode="aspectFill" @click="previewImage(index)"></image>
@click="previewImage(index)" </view>
></image> </view>
</view> <view v-if="details.BannerList.length > 1" class="img-box">
</view> <view style="
<view v-if="details.BannerList.length > 1" class="img-box">
<view
style="
width: calc((100vw - 80rpx - 20rpx) / 3); width: calc((100vw - 80rpx - 20rpx) / 3);
height: 226rpx; height: 226rpx;
position: relative; position: relative;
" ">
> <video id="myVideo" :src="details.VideoUrl" style="
<video
id="myVideo"
:src="details.VideoUrl"
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 20rpx 0 0 20rpx; border-radius: 20rpx 0 0 20rpx;
" "
:controls="controls" :controls="controls" :show-center-play-btn="false" :show-fullscreen-btn="false" @fullscreenchange="brandvideoControl"></video>
:show-center-play-btn="false" <view @click="enlarge(details.VideoUrl)" style="
:show-fullscreen-btn="false"
@fullscreenchange="brandvideoControl"
></video>
<view
@click="enlarge(details.VideoUrl)"
style="
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -257,109 +140,68 @@ ...@@ -257,109 +140,68 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
" ">
> <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
<image style="width: 37rpx; height: 44rpx" mode=""></image>
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png" </view>
style="width: 37rpx; height: 44rpx" </view>
mode="" <view v-for="(src, index) in details.BannerList" :key="index" style="
></image>
</view>
</view>
<view
v-for="(src, index) in details.BannerList"
:key="index"
style="
width: calc((100vw - 80rpx - 10rpx) / 3); width: calc((100vw - 80rpx - 10rpx) / 3);
height: 226rpx; height: 226rpx;
" "
v-if="index < 2" v-if="index < 2">
> <image :src="src" style="width: 100%; height: 100%" v-if="index == 0" mode="aspectFill" @click="previewImage(index)"></image>
<image <image :src="src" style="
:src="src"
style="width: 100%; height: 100%"
v-if="index == 0"
mode="aspectFill"
@click="previewImage(index)"
></image>
<image
:src="src"
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0 20rpx 20rpx 0; border-radius: 0 20rpx 20rpx 0;
" "
v-if="index == 1" v-if="index == 1" mode="aspectFill" @click="previewImage(index)"></image>
mode="aspectFill" </view>
@click="previewImage(index)" </view>
></image> </view>
</view> </view>
</view> <!-- //奖章 -->
</view> <view class="MedalBox" v-if="details.ListEnroll.length > 0">
</view> <view v-for="(item, index) in details.ListEnroll" :key="index" class="MedalBoxItem">
<!-- //奖章 --> <image :src="item.MedalImageBig" mode="heightFix" style="height: 100%" />
<view class="MedalBox" v-if="details.ListEnroll.length > 0"> </view>
<view </view>
v-for="(item, index) in details.ListEnroll" <view class="info1 flex flex-between">
:key="index" <view class="info1-item">
class="MedalBoxItem" <view class="info1-con">
> {{ details.ShopNum }}
<image </view>
:src="item.MedalImageBig" <view class="info1-title"> 店铺数量 </view>
mode="heightFix" </view>
style="height: 100%" <!-- <view class="info1-item">
/>
</view>
</view>
<view class="info1 flex flex-between">
<view class="info1-item">
<view class="info1-con">
{{ details.ShopNum }}
</view>
<view class="info1-title"> 店铺数量 </view>
</view>
<!-- <view class="info1-item">
<view class="info1-con"> <view class="info1-con">
{{ details.ProjectName }} {{ details.ProjectName }}
</view> </view>
<view class="info1-title"> 对标载体 </view> <view class="info1-title"> 对标载体 </view>
</view> --> </view> -->
<view class="info1-item"> <view class="info1-item">
<view class="info1-con"> <view class="info1-con">
<view <view class="brand-xinx-item-t" :style="{ color: mainColor }" v-if="
class="brand-xinx-item-t"
:style="{ color: mainColor }"
v-if="
details.AreaRequirement == 0 && details.AreaRequirement == 0 &&
details.EndAreaRequirement != 0 details.EndAreaRequirement != 0
" ">{{
>{{
details.EndAreaRequirement >= 10000 details.EndAreaRequirement >= 10000
? details.EndAreaRequirement / 10000 + "万" ? details.EndAreaRequirement / 10000 + "万"
: details.EndAreaRequirement : details.EndAreaRequirement
}}<text style="font-size: 12px"></text></view }}<text style="font-size: 12px"></text></view>
> <view class="brand-xinx-item-t" :style="{ color: mainColor }" v-if="
<view
class="brand-xinx-item-t"
:style="{ color: mainColor }"
v-if="
details.EndAreaRequirement == 0 && details.EndAreaRequirement == 0 &&
details.AreaRequirement != 0 details.AreaRequirement != 0
" ">{{
>{{
details.AreaRequirement >= 10000 details.AreaRequirement >= 10000
? details.AreaRequirement / 10000 + "万" ? details.AreaRequirement / 10000 + "万"
: details.AreaRequirement : details.AreaRequirement
}}<text style="font-size: 12px"></text></view }}<text style="font-size: 12px"></text></view>
> <view class="brand-xinx-item-t" :style="{ color: mainColor }" v-if="
<view
class="brand-xinx-item-t"
:style="{ color: mainColor }"
v-if="
details.AreaRequirement != 0 && details.AreaRequirement != 0 &&
details.EndAreaRequirement != 0 details.EndAreaRequirement != 0
" ">{{
>{{
details.AreaRequirement >= 10000 details.AreaRequirement >= 10000
? details.AreaRequirement / 10000 + "万" ? details.AreaRequirement / 10000 + "万"
: details.AreaRequirement : details.AreaRequirement
...@@ -367,23 +209,17 @@ ...@@ -367,23 +209,17 @@
details.EndAreaRequirement >= 10000 details.EndAreaRequirement >= 10000
? details.EndAreaRequirement / 10000 + "万" ? details.EndAreaRequirement / 10000 + "万"
: details.EndAreaRequirement : details.EndAreaRequirement
}}<text style="font-size: 12px"></text></view }}<text style="font-size: 12px"></text></view>
> <view class="brand-xinx-item-t" :style="{ color: mainColor }" v-if="
<view
class="brand-xinx-item-t"
:style="{ color: mainColor }"
v-if="
details.AreaRequirement == 0 && details.AreaRequirement == 0 &&
details.EndAreaRequirement == 0 details.EndAreaRequirement == 0
" ">/</view>
>/</view </view>
> <view class="info1-title"> 面积需求 </view>
</view> </view>
<view class="info1-title"> 面积需求 </view> </view>
</view> <view class="baseinfo">
</view> <!-- <view class="baseinfo-item flex ">
<view class="baseinfo">
<!-- <view class="baseinfo-item flex ">
<view class="baseinfo-label"> <view class="baseinfo-label">
拓店区域: 拓店区域:
</view> </view>
...@@ -399,902 +235,746 @@ ...@@ -399,902 +235,746 @@
商业地产+体育运动的新型“SPORTMALL”的全新商业场景 商业地产+体育运动的新型“SPORTMALL”的全新商业场景
</view> </view>
</view> --> </view> -->
<view class="baseinfo-item flex" v-if="details.CustomerType && details.CustomerType!='' "> <view class="baseinfo-item flex" v-if="details.CustomerType && details.CustomerType!='' ">
<view class="baseinfo-label"> 客群定位: </view> <view class="baseinfo-label"> 客群定位: </view>
<view class="baseinfo-con"> <view class="baseinfo-con">
{{ details.CustomerType }} {{ details.CustomerType }}
</view> </view>
</view> </view>
<view class="baseinfo-item flex" v-if="details.BrandType && details.BrandType!='' "> <view class="baseinfo-item flex" v-if="details.BrandType && details.BrandType!='' ">
<view class="baseinfo-label"> 行业定位: </view> <view class="baseinfo-label"> 行业定位: </view>
<view class="baseinfo-con"> <view class="baseinfo-con">
{{ details.BrandType }} {{ details.BrandType }}
</view> </view>
</view> </view>
<view class="baseinfo-item flex" v-if="details.StoreExpansion && details.StoreExpansion!='' ">
<view class="baseinfo-label"> 开店方向: </view> <view class="baseinfo-item flex" v-if="details.StoreExpansion && details.StoreExpansion!='' ">
<view class="baseinfo-con"> <view class="baseinfo-label"> 开店方向: </view>
{{ details.StoreExpansion }} <view class="baseinfo-con">
</view> {{ details.StoreExpansion }}
</view> </view>
<view class="baseinfo-item flex" v-if="details.IsInChengdu && details.IsInChengdu==1 "> </view>
<view class="baseinfo-label"> 成都落地: </view> <view class="baseinfo-item flex" v-if="details.IsInChengdu && details.IsInChengdu==1 ">
<view class="baseinfo-con"> <view class="baseinfo-label"> 成都落地: </view>
<view class="baseinfo-con">
</view>
</view> </view>
<view class="baseinfo-item flex" v-if="details.WishDescription && details.WishDescription != ''"> </view>
<view class="baseinfo-label"> 拓展对接人: </view> <view class="baseinfo-item flex" v-if="details.Other && details.Other!='' ">
</view> <view class="baseinfo-label"> 拓展需求: </view>
<view style="width: 100%; height: 360rpx" v-if="details.WishDescription && details.WishDescription != ''"> <view class="baseinfo-con">
<image <rich-text :nodes="details.Other"></rich-text>
:src="details.WishCard" </view>
style="width: 100%; height: 360rpx; border-radius: 20px" </view>
@click="previewImage2(details.WishCard)" <view class="baseinfo-item flex" v-if="details.WishDescription && details.WishDescription != ''">
></image> <view class="baseinfo-label"> 拓展对接人: </view>
</view> </view>
</view> <view style="width: 100%; height: 360rpx" v-if="details.WishDescription && details.WishDescription != ''">
<view class="brand-title" v-if="details.WishDescription && details.WishDescription != ''"> <image :src="details.WishCard" style="width: 100%; height: 360rpx; border-radius: 20px" @click="previewImage2(details.WishCard)"></image>
<image </view>
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-tzxq.png" </view>
mode="widthFix" <view class="brand-title" v-if="details.WishDescription && details.WishDescription != ''">
></image> <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-tzxq.png" mode="widthFix"></image>
</view> </view>
<view <view style="margin-top: 30rpx" v-if="details.WishDescription && details.WishDescription != ''">
style="margin-top: 30rpx" <h-parse :content="details.WishDescription" @navigate="clickDescription"></h-parse>
v-if="details.WishDescription && details.WishDescription != ''" </view>
>
<h-parse <view class="brand-title">
:content="details.WishDescription" <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-wyxq.png" mode="widthFix"></image>
@navigate="clickDescription" </view>
></h-parse> <view class="Listbox">
</view> <view id="kiakou" class="Listbox-item" @click="showTips('kiakou', details.ShopSize, details.IsShopSize)">
<image :src="EquityList[8].ImagePath" v-if="details.IsShopSize == 1" mode="widthFix"></image>
<view class="brand-title"> <image :src="EquityList[8].Image_n" v-else mode="widthFix"></image>
<image <text class="list-item-text" :style="{
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-wyxq.png"
mode="widthFix"
></image>
</view>
<view class="Listbox">
<view
id="kiakou"
class="Listbox-item"
@click="showTips('kiakou', details.ShopSize, details.IsShopSize)"
>
<image
:src="EquityList[8].ImagePath"
v-if="details.IsShopSize == 1"
mode="widthFix"
></image>
<image
:src="EquityList[8].Image_n"
v-else
mode="widthFix"
></image>
<text
class="list-item-text"
:style="{
color: details.IsShopSize == 1 ? '#424242' : '#D6D6D6', color: details.IsShopSize == 1 ? '#424242' : '#D6D6D6',
}" }">{{ EquityList[8].Title }}</text>
>{{ EquityList[8].Title }}</text </view>
> <view class="Listbox-item">
</view> <image :src="EquityList[0].ImagePath" v-if="details.Plumbing == 1" mode="widthFix"></image>
<view class="Listbox-item"> <image :src="EquityList[0].Image_n" v-else mode="widthFix"></image>
<image <text class="list-item-text" :style="{
:src="EquityList[0].ImagePath"
v-if="details.Plumbing == 1"
mode="widthFix"
></image>
<image
:src="EquityList[0].Image_n"
v-else
mode="widthFix"
></image>
<text
class="list-item-text"
:style="{
color: details.Plumbing == 1 ? '#424242' : '#D6D6D6', color: details.Plumbing == 1 ? '#424242' : '#D6D6D6',
}" }">{{ EquityList[0].Title }}</text>
>{{ EquityList[0].Title }}</text </view>
> <view class="Listbox-item">
</view> <image :src="EquityList[7].ImagePath" v-if="details.Caliber == 1" mode="widthFix"></image>
<view class="Listbox-item"> <image :src="EquityList[7].Image_n" v-else mode="widthFix"></image>
<image <text class="list-item-text" :style="{ color: details.Caliber == 1 ? '#424242' : '#D6D6D6' }">{{ EquityList[7].Title }}</text>
:src="EquityList[7].ImagePath" </view>
v-if="details.Caliber == 1" <view class="Listbox-item">
mode="widthFix" <image :src="EquityList[1].ImagePath" v-if="details.Sewage == 1" mode="widthFix"></image>
></image> <image :src="EquityList[1].Image_n" v-else mode="widthFix"></image>
<image <text class="list-item-text" :style="{ color: details.Sewage == 1 ? '#424242' : '#D6D6D6' }">{{ EquityList[1].Title }}</text>
:src="EquityList[7].Image_n" </view>
v-else
mode="widthFix"
></image>
<text
class="list-item-text"
:style="{ color: details.Caliber == 1 ? '#424242' : '#D6D6D6' }"
>{{ EquityList[7].Title }}</text
>
</view>
<view class="Listbox-item">
<image
:src="EquityList[1].ImagePath"
v-if="details.Sewage == 1"
mode="widthFix"
></image>
<image
:src="EquityList[1].Image_n"
v-else
mode="widthFix"
></image>
<text
class="list-item-text"
:style="{ color: details.Sewage == 1 ? '#424242' : '#D6D6D6' }"
>{{ EquityList[1].Title }}</text
>
</view>
<!-- 燃气 --> <!-- 燃气 -->
<view <view class="Listbox-item" id="ranqi" @click="showTips('ranqi', details.RanQiBZ, details.RanQi)">
class="Listbox-item" <image :src="EquityList[2].ImagePath" v-if="details.RanQi == 1" mode="widthFix"></image>
id="ranqi" <image :src="EquityList[2].Image_n" v-else mode="widthFix"></image>
@click="showTips('ranqi', details.RanQiBZ, details.RanQi)" <text class="list-item-text" :style="{ color: details.RanQi == 1 ? '#424242' : '#D6D6D6' }">{{ EquityList[2].Title }}</text>
> </view>
<image <view class="Listbox-item" id="dianliang" @click="
:src="EquityList[2].ImagePath"
v-if="details.RanQi == 1"
mode="widthFix"
></image>
<image
:src="EquityList[2].Image_n"
v-else
mode="widthFix"
></image>
<text
class="list-item-text"
:style="{ color: details.RanQi == 1 ? '#424242' : '#D6D6D6' }"
>{{ EquityList[2].Title }}</text
>
</view>
<view
class="Listbox-item"
id="dianliang"
@click="
showTips('dianliang', details.DianLiang, details.IsDianLiang) showTips('dianliang', details.DianLiang, details.IsDianLiang)
" ">
> <image :src="EquityList[3].ImagePath" v-if="details.IsDianLiang == 1" mode="widthFix"></image>
<image <image :src="EquityList[3].Image_n" v-else mode="widthFix"></image>
:src="EquityList[3].ImagePath" <text class="list-item-text" :style="{
v-if="details.IsDianLiang == 1"
mode="widthFix"
></image>
<image
:src="EquityList[3].Image_n"
v-else
mode="widthFix"
></image>
<text
class="list-item-text"
:style="{
color: details.IsDianLiang == 1 ? '#424242' : '#D6D6D6', color: details.IsDianLiang == 1 ? '#424242' : '#D6D6D6',
}" }">{{ EquityList[3].Title }}</text>
>{{ EquityList[3].Title }}</text </view>
>
</view>
<view <view class="Listbox-item" id="paiyan" @click="showTips('paiyan', details.PaiYanBZ, details.PaiYan)">
class="Listbox-item" <image :src="EquityList[5].ImagePath" v-if="details.PaiYan == 1" mode="widthFix"></image>
id="paiyan" <image :src="EquityList[5].Image_n" v-else mode="widthFix"></image>
@click="showTips('paiyan', details.PaiYanBZ, details.PaiYan)" <text class="list-item-text" :style="{ color: details.PaiYan == 1 ? '#424242' : '#D6D6D6' }">{{ EquityList[5].Title }}</text>
> </view>
<image <view class="Listbox-item">
:src="EquityList[5].ImagePath" <image :src="EquityList[6].ImagePath" v-if="details.KongTiao == 1" mode="widthFix"></image>
v-if="details.PaiYan == 1" <image :src="EquityList[6].Image_n" v-else mode="widthFix"></image>
mode="widthFix" <text class="list-item-text" :style="{
></image>
<image
:src="EquityList[5].Image_n"
v-else
mode="widthFix"
></image>
<text
class="list-item-text"
:style="{ color: details.PaiYan == 1 ? '#424242' : '#D6D6D6' }"
>{{ EquityList[5].Title }}</text
>
</view>
<view class="Listbox-item">
<image
:src="EquityList[6].ImagePath"
v-if="details.KongTiao == 1"
mode="widthFix"
></image>
<image
:src="EquityList[6].Image_n"
v-else
mode="widthFix"
></image>
<text
class="list-item-text"
:style="{
color: details.KongTiao == 1 ? '#424242' : '#D6D6D6', color: details.KongTiao == 1 ? '#424242' : '#D6D6D6',
}" }">{{ EquityList[6].Title }}</text>
>{{ EquityList[6].Title }}</text </view>
> <view class="Listbox-item">
</view> <image :src="EquityList[4].ImagePath" v-if="details.XinFeng == 1" mode="widthFix"></image>
<view class="Listbox-item"> <image :src="EquityList[4].Image_n" v-else mode="widthFix"></image>
<image <text class="list-item-text" :style="{ color: details.XinFeng == 1 ? '#424242' : '#D6D6D6' }">{{ EquityList[4].Title }}</text>
:src="EquityList[4].ImagePath" </view>
v-if="details.XinFeng == 1" </view>
mode="widthFix"
></image> </view>
<image </view>
:src="EquityList[4].Image_n" </scroll-view>
v-else <bianmarenTooltip :gravity="gravity" :tooltipShow="tooltipShow" :btns="tooltipBtns" :eleId="eleId">
mode="widthFix" </bianmarenTooltip>
></image> <auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
<text </view>
class="list-item-text"
:style="{ color: details.XinFeng == 1 ? '#424242' : '#D6D6D6' }"
>{{ EquityList[4].Title }}</text
>
</view>
</view>
</view>
</view>
</scroll-view>
<bianmarenTooltip
:gravity="gravity"
:tooltipShow="tooltipShow"
:btns="tooltipBtns"
:eleId="eleId"
>
</bianmarenTooltip>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth" ></auth>
</view>
</template> </template>
<script> <script>
import auth from "@/components/auth/index.vue"; import auth from "@/components/auth/index.vue";
import hParse from "@/components/u-parse/parse.vue"; import hParse from "@/components/u-parse/parse.vue";
import bianmarenTooltip from "../components/bianmaren-tooltips.vue"; import bianmarenTooltip from "../components/bianmaren-tooltips.vue";
let timer; let timer;
export default { export default {
components: { components: {
hParse, hParse,
bianmarenTooltip, bianmarenTooltip,
auth auth
}, },
data() { data() {
return { return {
showAuth:false, showAuth: false,
u:{}, u: {},
rate: 5, rate: 5,
ID: 0, ID: 0,
details: null, details: null,
typeList: [ typeList: [{
{ Id: 0,
Id: 0, Name: "视频",
Name: "视频", },
}, {
{ Id: 1,
Id: 1, Name: "图片",
Name: "图片", },
}, ],
], boxOption: 0,
boxOption: 0, navsOption: 0,
navsOption: 0, titleStyle: {},
titleStyle: {}, active: 0,
active: 0, mainColor: "",
mainColor: "", controls: false, //显示默认控件
controls: false, //显示默认控件 EquityList: [{
EquityList: [ Title: "上下水",
{ ImagePath: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs.png",
Title: "上下水", Image_n: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs-n.png",
ImagePath: },
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs.png", {
Image_n: Title: "排污",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs-n.png", ImagePath: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw.png",
}, Image_n: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw-n.png",
{ },
Title: "排污", {
ImagePath: Title: "燃气",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw.png", ImagePath: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh.png",
Image_n: Image_n: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh-n.png",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw-n.png", },
}, {
{ Title: "电量负荷",
Title: "燃气", ImagePath: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl.png",
ImagePath: Image_n: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl-n.png",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh.png", },
Image_n: {
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh-n.png", Title: "新风",
}, ImagePath: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf.png",
{ Image_n: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf-n.png",
Title: "电量负荷", },
ImagePath: {
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl.png", Title: "排烟量",
Image_n: ImagePath: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl.png",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl-n.png", Image_n: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl-n.png",
}, },
{ {
Title: "新风", Title: "空调",
ImagePath: ImagePath: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt.png",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf.png", Image_n: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt-n.png",
Image_n: },
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf-n.png", {
}, Title: "管径",
{ ImagePath: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj.png",
Title: "排烟量", Image_n: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj-n.png",
ImagePath: },
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl.png", {
Image_n: Title: "开口尺寸",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl-n.png", ImagePath: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc.png",
}, Image_n: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc-n.png",
{ },
Title: "空调", ],
ImagePath: gravity: "top",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt.png", tooltipShow: false,
Image_n: tooltipBtns: ["今日sad"],
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt-n.png", eleId: "", //点击元素
}, islook: false, //是否可以浏览心愿
{ };
Title: "管径", },
ImagePath: onLoad(options) {
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj.png", let that = this;
Image_n: if (options && options.id) {
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj-n.png", this.ID = options.id;
},
{ this.u = uni.getStorageSync("mall_UserInfo");
Title: "开口尺寸", if (!this.u) {
ImagePath: this.u = {
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc.png", nickName: "未登录",
Image_n: avatarUrl: "",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc-n.png", };
}, this.showAuth = true;
], } else {
gravity: "top", this.GetBrandDetails();
tooltipShow: false, }
tooltipBtns: ["今日sad"], }
eleId: "", //点击元素
islook: false, //是否可以浏览心愿 uni.getSystemInfo({
}; success(res) {
}, that.titleStyle = {
onLoad(options) { height: "45px",
let that = this; paddingTop: `${res.statusBarHeight}px`,
if (options && options.id) { opacity: "0%",
this.ID = options.id; };
},
this.u = uni.getStorageSync("mall_UserInfo"); });
if (!this.u) { this.mainColor = this.$uiConfig.mainColor;
this.u = { uni.setNavigationBarTitle({
nickName: "未登录", title: "详情",
avatarUrl: "", });
}; uni.setNavigationBarColor({
this.showAuth = true; frontColor: "#ffffff",
} else { backgroundColor: "#D40224",
this.GetBrandDetails(); animation: {
} duration: 400,
} timingFunc: "easeIn",
},
uni.getSystemInfo({ });
success(res) { },
that.titleStyle = { onShareTimeline() {
height: "45px", //朋友圈
paddingTop: `${res.statusBarHeight}px`, let uid = uni.getStorageSync("mall_UserInfo") ?
opacity: "0%", uni.getStorageSync("mall_UserInfo").UserId :
}; 0;
}, if (uid == 0) {
}); uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
this.mainColor = this.$uiConfig.mainColor; }
uni.setNavigationBarTitle({ let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
title: "详情", uni.getStorageSync("mall_UserInfo").SmallShopId :
}); 0;
uni.setNavigationBarColor({ if (SmallShopId == 0) {
frontColor: "#ffffff", //如果微店id为0 去找所属微店id
backgroundColor: "#D40224", SmallShopId = uni.getStorageSync("mall_UserInfo") ?
animation: { uni.getStorageSync("mall_UserInfo").UserSmallShopId :
duration: 400, 0;
timingFunc: "easeIn", }
}, let Up = uni.getStorageSync("mall_UserInfo") ?
}); uni.getStorageSync("mall_UserInfo").UserPageType :
}, 0;
onShareTimeline() { return {
//朋友圈 title: this.details.FullBrandName ? this.details.FullBrandName : "",
let uid = uni.getStorageSync("mall_UserInfo") query: "user_id=" +
? uni.getStorageSync("mall_UserInfo").UserId uid +
: 0; "&SmallShopId=" +
if (uid == 0) { SmallShopId +
uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0; "&Up=" +
} Up +
let SmallShopId = uni.getStorageSync("mall_UserInfo") "&id=" +
? uni.getStorageSync("mall_UserInfo").SmallShopId this.ID,
: 0; imageUrl: this.details.BannerList && this.details.BannerList.length > 0 ?
if (SmallShopId == 0) { this.details.BannerList[0] : "",
//如果微店id为0 去找所属微店id };
SmallShopId = uni.getStorageSync("mall_UserInfo") },
? uni.getStorageSync("mall_UserInfo").UserSmallShopId onShareAppMessage(res) {
: 0; //朋友
} let uid = uni.getStorageSync("mall_UserInfo") ?
let Up = uni.getStorageSync("mall_UserInfo") uni.getStorageSync("mall_UserInfo").UserId :
? uni.getStorageSync("mall_UserInfo").UserPageType 0;
: 0; if (uid == 0) {
return { uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
title: this.details.FullBrandName ? this.details.FullBrandName : "", }
query: let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
"user_id=" + uni.getStorageSync("mall_UserInfo").SmallShopId :
uid + 0;
"&SmallShopId=" + if (SmallShopId == 0) {
SmallShopId + //如果微店id为0 去找所属微店id
"&Up=" + SmallShopId = uni.getStorageSync("mall_UserInfo") ?
Up + uni.getStorageSync("mall_UserInfo").UserSmallShopId :
"&id=" + 0;
this.ID, }
imageUrl: let Up = uni.getStorageSync("mall_UserInfo") ?
this.details.BannerList && this.details.BannerList.length > 0 uni.getStorageSync("mall_UserInfo").UserPageType :
? this.details.BannerList[0] 0;
: "", return {
}; title: this.details.FullBrandName ? this.details.FullBrandName : "",
}, path: "/pages/index/index?user_id=" +
onShareAppMessage(res) { uid +
//朋友 "&SmallShopId=" +
let uid = uni.getStorageSync("mall_UserInfo") SmallShopId +
? uni.getStorageSync("mall_UserInfo").UserId "&Up=" +
: 0; Up +
if (uid == 0) { "&id=" +
uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0; this.ID +
} "&JumpType=15",
let SmallShopId = uni.getStorageSync("mall_UserInfo") imageUrl: this.details.BannerList && this.details.BannerList.length > 0 ?
? uni.getStorageSync("mall_UserInfo").SmallShopId this.details.BannerList[0] : "",
: 0; };
if (SmallShopId == 0) { },
//如果微店id为0 去找所属微店id methods: {
SmallShopId = uni.getStorageSync("mall_UserInfo") reloadUserinfo() {
? uni.getStorageSync("mall_UserInfo").UserSmallShopId this.u = uni.getStorageSync("mall_UserInfo");
: 0; this.GetBrandDetails();
} },
let Up = uni.getStorageSync("mall_UserInfo") //关闭登录窗口
? uni.getStorageSync("mall_UserInfo").UserPageType gbAuth() {
: 0; uni.navigateBack()
return { },
title: this.details.FullBrandName ? this.details.FullBrandName : "", showTips(id, text, showis) {
path: clearInterval(timer);
"/pages/index/index?user_id=" + if (this.eleId == id && this.tooltipShow == true) {
uid + this.tooltipShow = false;
"&SmallShopId=" + } else {
SmallShopId + console.log(text, showis);
"&Up=" + if (text != undefined && text != null && text != "" && showis == 1) {
Up + this.eleId = id;
"&id=" + this.tooltipBtns = [text];
this.ID + this.tooltipShow = true;
"&JumpType=15", timer = setTimeout(() => {
imageUrl: this.tooltipShow = false;
this.details.BannerList && this.details.BannerList.length > 0 }, 3000);
? this.details.BannerList[0] } else {
: "", this.tooltipShow = false;
}; }
}, }
methods: { },
reloadUserinfo() { clickDescription(e) {
this.u = uni.getStorageSync("mall_UserInfo"); console.log(e);
this.GetBrandDetails(); },
}, GetBrandDetails() {
//关闭登录窗口 this.request2({
gbAuth() { url: "/api/AppletTrade/GetBrandDetails",
uni.navigateBack() data: {
}, ID: this.ID,
showTips(id, text, showis) { },
clearInterval(timer); },
if (this.eleId == id && this.tooltipShow == true) { (res) => {
this.tooltipShow = false; if (res.resultCode == 1) {
} else { this.details = res.data;
console.log(text, showis);
if (text != undefined && text != null && text != "" && showis == 1) { if (res.data.VideoUrl == "") {
this.eleId = id; this.active = 1;
this.tooltipBtns = [text]; }
this.tooltipShow = true; this.details.imgs = [];
timer = setTimeout(() => { this.details.BannerList.forEach((x) => {
this.tooltipShow = false; let obj = {
}, 3000); name: x,
} else { };
this.tooltipShow = false; this.details.imgs.push(obj);
} });
} }
}, }
clickDescription(e) { );
console.log(e); },
}, changeHandler(i) {
GetBrandDetails() { this.active = i;
this.request2( },
{ previewImage(i) {
url: "/api/AppletTrade/GetBrandDetails", console.log(i);
data: { uni.previewImage({
ID: this.ID, urls: this.details.BannerList,
}, current: i,
}, longPressActions: {
(res) => { itemList: ["发送给朋友", "保存图片", "收藏"],
if (res.resultCode == 1) { success: function(data) {},
this.details = res.data; fail: function(err) {
console.log(err.errMsg);
if (res.data.VideoUrl == "") { },
this.active = 1; },
} });
this.details.imgs = []; },
this.details.BannerList.forEach((x) => { previewImage2(i) {
let obj = { uni.previewImage({
name: x, urls: [this.details.WishCard],
}; current: 0,
this.details.imgs.push(obj); longPressActions: {
}); itemList: ["发送给朋友", "保存图片", "收藏"],
} success: function(data) {},
} fail: function(err) {
); console.log(err.errMsg);
}, },
changeHandler(i) { },
this.active = i; });
}, },
previewImage(i) { scroll(e) {
console.log(i); this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
uni.previewImage({ this.titleStyle.opacity =
urls: this.details.BannerList, (e.detail.scrollTop - 100 < 0 ?
current: i, 0 :
longPressActions: { Math.floor(e.detail.scrollTop - 100)) + "%";
itemList: ["发送给朋友", "保存图片", "收藏"], this.tooltipShow = false;
success: function (data) {}, this.$forceUpdate();
fail: function (err) { },
console.log(err.errMsg); goback() {
}, uni.navigateBack({
}, delta: 1,
}); });
}, },
previewImage2(i) { enlarge(file) {
uni.previewImage({ // 全屏
urls: [this.details.WishCard],
current: 0, this.videoContext = uni.createVideoContext("myVideo");
longPressActions: { this.videoContext.requestFullScreen({
itemList: ["发送给朋友", "保存图片", "收藏"], direction: 0,
success: function (data) {}, });
fail: function (err) { },
console.log(err.errMsg); brandvideoControl(e) {
}, console.log(e);
}, if (e.detail.fullScreen == false) {
}); this.videoContext.stop();
}, this.controls = false;
scroll(e) { } else {
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5); this.videoContext.play();
this.titleStyle.opacity = this.controls = true;
(e.detail.scrollTop - 100 < 0 }
? 0 },
: Math.floor(e.detail.scrollTop - 100)) + "%"; getlove() {
this.tooltipShow = false; this.request2({
this.$forceUpdate(); url: "/api/AppletTrade/GetCollect",
}, data: {
goback() { Type: 2,
uni.navigateBack({ SourceId: this.ID,
delta: 1, Id: this.details.CollectId,
}); },
}, },
enlarge(file) { (res) => {
// 全屏 if (res.resultCode == 1) {
uni.showToast({
this.videoContext = uni.createVideoContext("myVideo"); title: res.message,
this.videoContext.requestFullScreen({ icon: "none",
direction: 0, });
}); this.GetBrandDetails();
}, }
brandvideoControl(e) { }
console.log(e); );
if (e.detail.fullScreen == false) { },
this.videoContext.stop(); // 关注与取消关注
this.controls = false; follow() {
} else { let that = this;
this.videoContext.play(); let parms = {
this.controls = true; url: "/api/AppletTrade/GetCollect",
} data: {
}, SourceId: this.ID,
getlove() { Id: this.details.CollectId,
this.request2( Type: 2,
{ },
url: "/api/AppletTrade/GetCollect", };
data: { this.request2(parms, (res) => {
Type: 2, if (res.resultCode == 1) {
SourceId: this.ID, that.GetBrandDetails();
Id: this.details.CollectId, }
}, });
}, },
(res) => { },
if (res.resultCode == 1) { };
uni.showToast({
title: res.message,
icon: "none",
});
this.GetBrandDetails();
}
}
);
},
// 关注与取消关注
follow() {
let that = this;
let parms = {
url: "/api/AppletTrade/GetCollect",
data: {
SourceId: this.ID,
Id: this.details.CollectId,
Type: 2,
},
};
this.request2(parms, (res) => {
if (res.resultCode == 1) {
that.GetBrandDetails();
}
});
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.flex { .flex {
display: flex; display: flex;
} }
.wrap { .wrap {
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-center { .flex-center {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.flex-between { .flex-between {
justify-content: space-between; justify-content: space-between;
} }
.item-center { .item-center {
align-items: center; align-items: center;
} }
.bg-red { .bg-red {
background-color: #d40224; background-color: #d40224;
} }
.detail-box { .detail-box {
width: 100%; width: 100%;
box-shadow: 0px -4rpx 71rpx 0rpx rgba(111, 111, 111, 0.26); box-shadow: 0px -4rpx 71rpx 0rpx rgba(111, 111, 111, 0.26);
border-radius: 50rpx 50rpx 0rpx 0rpx; border-radius: 50rpx 50rpx 0rpx 0rpx;
padding: 40rpx 40rpx 90rpx 40rpx; padding: 40rpx 40rpx 90rpx 40rpx;
font-family: PingFang SC; font-family: PingFang SC;
background-color: #ffffff; background-color: #ffffff;
.header {
margin-bottom: 20rpx; .header {
align-items: flex-start; margin-bottom: 20rpx;
align-items: flex-start;
.title {
max-width: calc(100vw - 100rpx - 70rpx); .title {
font-size: 42rpx; max-width: calc(100vw - 100rpx - 70rpx);
font-weight: 800; font-size: 42rpx;
color: #1f1f1f; font-weight: 800;
margin-right: 20rpx; color: #1f1f1f;
} margin-right: 20rpx;
}
.tag-box {
border-radius: 6rpx; .tag-box {
width: 70px; border-radius: 6rpx;
display: flex; width: 70px;
margin-top: 4px; display: flex;
height: 20px; margin-top: 4px;
.tag1 { height: 20px;
display: flex;
align-items: center; .tag1 {
justify-content: center; display: flex;
background-color: #1f1f1f; align-items: center;
font-size: 20rpx; justify-content: center;
color: #ffffff; background-color: #1f1f1f;
} font-size: 20rpx;
color: #ffffff;
.tag2 { }
display: flex;
align-items: center; .tag2 {
justify-content: center; display: flex;
background-image: linear-gradient(90deg, #e8cea5, #caa974); align-items: center;
font-size: 20rpx; justify-content: center;
color: #1f1f1f; background-image: linear-gradient(90deg, #e8cea5, #caa974);
} font-size: 20rpx;
} color: #1f1f1f;
} }
}
.score-box { }
height: 40rpx;
margin-bottom: 35rpx; .score-box {
height: 40rpx;
.rate { margin-bottom: 35rpx;
margin-right: 20rpx;
} .rate {
margin-right: 20rpx;
.score { }
font-size: 20rpx;
font-weight: 500; .score {
color: #f30329; font-size: 20rpx;
margin-right: 20rpx; font-weight: 500;
} color: #f30329;
margin-right: 20rpx;
.desire { }
font-size: 20rpx;
color: #111111; .desire {
} font-size: 20rpx;
} color: #111111;
}
.img-box { }
height: 226rpx;
border-radius: 20rpx; .img-box {
height: 226rpx;
box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2); border-radius: 20rpx;
margin-bottom: 45rpx;
display: flex; box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
align-items: center; margin-bottom: 45rpx;
justify-content: space-between; display: flex;
align-items: center;
overflow: hidden; justify-content: space-between;
.img { overflow: hidden;
width: calc((100vw - 80rpx - 20rpx) / 3);
height: 226rpx; .img {
} width: calc((100vw - 80rpx - 20rpx) / 3);
} height: 226rpx;
}
.info1 { }
margin-bottom: 60rpx;
.info1 {
.info1-item { margin-bottom: 60rpx;
// width: 200rpx;之前的3个是200 下面是2个 就平分了宽度
width: calc((100vw - 80rpx - 20rpx) / 2); .info1-item {
// width: 200rpx;之前的3个是200 下面是2个 就平分了宽度
.info1-con { width: calc((100vw - 80rpx - 20rpx) / 2);
font-size: 30rpx;
font-weight: bold; .info1-con {
color: #f30329; font-size: 30rpx;
text-align: center; font-weight: bold;
margin-bottom: 18rpx; color: #f30329;
} text-align: center;
margin-bottom: 18rpx;
.info1-title { }
text-align: center;
font-size: 24rpx; .info1-title {
font-weight: 500; text-align: center;
color: #a4a4a4; font-size: 24rpx;
} font-weight: 500;
} color: #a4a4a4;
} }
}
.baseinfo { }
margin-bottom: 40rpx;
.baseinfo {
.baseinfo-item { margin-bottom: 40rpx;
margin-bottom: 30rpx;
.baseinfo-item {
.baseinfo-label { margin-bottom: 30rpx;
font-size: 24rpx;
font-weight: 500; .baseinfo-label {
color: #a4a4a4; font-size: 24rpx;
margin-right: 10rpx; font-weight: 500;
white-space: nowrap; color: #a4a4a4;
} margin-right: 10rpx;
white-space: nowrap;
.baseinfo-con { }
font-size: 26rpx;
font-weight: 500; .baseinfo-con {
color: #1f1f1f; font-size: 26rpx;
} font-weight: 500;
} color: #1f1f1f;
} }
} }
}
.brand-title { }
width: 134rpx;
margin-top: 30px; .brand-title {
} width: 134rpx;
margin-top: 30px;
.brand-title image { }
width: 100%;
height: auto; .brand-title image {
} width: 100%;
height: auto;
.Listbox { }
width: 100%;
display: flex; .Listbox {
flex-wrap: wrap; width: 100%;
margin-top: 10px; display: flex;
} flex-wrap: wrap;
margin-top: 10px;
.Listbox-item { }
width: 25%;
display: flex; .Listbox-item {
flex-direction: column; width: 25%;
align-items: center; display: flex;
height: 170rpx; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; height: 170rpx;
} align-items: center;
justify-content: center;
.Listbox-item image { }
width: 74rpx;
height: auto; .Listbox-item image {
} width: 74rpx;
height: auto;
.list-item-text { }
width: calc(100vw / 4);
margin-top: 5px; .list-item-text {
text-align: center; width: calc(100vw / 4);
font-size: 12px; margin-top: 5px;
} text-align: center;
.screenBoxItem { font-size: 12px;
/* width: 130rpx; */ }
height: 30rpx;
background-color: #e2e2e2; .screenBoxItem {
border-radius: 23rpx; /* width: 130rpx; */
margin-right: 30rpx; height: 30rpx;
display: flex; background-color: #e2e2e2;
color: #999999; border-radius: 23rpx;
overflow: hidden; margin-right: 30rpx;
margin: 0 10rpx; display: flex;
overflow: hidden; color: #999999;
border-radius: 6rpx; overflow: hidden;
} margin: 0 10rpx;
.screenBoxItemYear { overflow: hidden;
/* width: 50%; */ border-radius: 6rpx;
height: 30rpx; }
background: #e2e2e2;
display: flex; .screenBoxItemYear {
justify-content: center; /* width: 50%; */
align-items: center; height: 30rpx;
font-size: 20rpx; background: #e2e2e2;
font-family: PingFang SC; display: flex;
font-weight: 500; justify-content: center;
white-space: nowrap; align-items: center;
border-radius: 6rpx 0px 0px 6rpx; font-size: 20rpx;
box-sizing: border-box; font-family: PingFang SC;
padding: 0 10rpx; font-weight: 500;
} white-space: nowrap;
.activeYear { border-radius: 6rpx 0px 0px 6rpx;
background: #1f1f1f; box-sizing: border-box;
color: #ffffff; padding: 0 10rpx;
} }
.screenBoxItemName {
/* width: 50%; */ .activeYear {
height: 30rpx; background: #1f1f1f;
background: #eaeaea; color: #ffffff;
display: flex; }
justify-content: center;
align-items: center; .screenBoxItemName {
font-size: 20rpx; /* width: 50%; */
font-family: PingFang SC; height: 30rpx;
font-weight: 500; background: #eaeaea;
box-sizing: border-box; display: flex;
padding: 0 10rpx; justify-content: center;
white-space: nowrap; align-items: center;
border-radius: 0px 6rpx 6rpx 0px; font-size: 20rpx;
} font-family: PingFang SC;
.activeName { font-weight: 500;
background: #d0aa7b; box-sizing: border-box;
color: #111111; padding: 0 10rpx;
} white-space: nowrap;
.MedalBox { border-radius: 0px 6rpx 6rpx 0px;
background: #f0f0f0; }
border-radius: 20rpx;
box-sizing: border-box; .activeName {
padding: 15rpx; background: #d0aa7b;
display: flex; color: #111111;
flex-wrap: wrap; }
margin-bottom: 30rpx;
} .MedalBox {
.MedalBoxItem { background: #f0f0f0;
width: 30%; border-radius: 20rpx;
height: 135rpx; box-sizing: border-box;
display: flex; padding: 15rpx;
justify-content: center; display: flex;
align-items: center; flex-wrap: wrap;
margin: 10rpx; margin-bottom: 30rpx;
} }
.MedalBoxItem {
width: 30%;
height: 135rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 10rpx;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment