760 lines
18 KiB
Vue
760 lines
18 KiB
Vue
|
<template>
|
|||
|
<!-- <div class="insurProDetail">insurProDetail</div> -->
|
|||
|
<view class="page insurProDetail">
|
|||
|
<component :is="'style'">
|
|||
|
:root { --height-to-be-removed: {{ heightToBeRemoved + "px" }}; }
|
|||
|
</component>
|
|||
|
<view class="page-head" :ref="'pageHead'" @click="heiToBeRem">
|
|||
|
<view class="head-top">
|
|||
|
<view v-if="false" class="image-view">
|
|||
|
<image :src="thumbLink(options.lenderName)" />
|
|||
|
</view>
|
|||
|
<view class="insur-pro-info">
|
|||
|
<view class="insur-pro-name">
|
|||
|
<text>{{ insurProduct.insuranceName }}</text>
|
|||
|
</view>
|
|||
|
<view class="bank">
|
|||
|
<text>{{ options.companyName }}</text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
<view class="page-body">
|
|||
|
<view class="body-view" v-if="true">
|
|||
|
<scroll-view
|
|||
|
class="top-menu-view"
|
|||
|
scroll-x="true"
|
|||
|
:scroll-into-view="tabCurrent"
|
|||
|
:ref="'topMenuView'"
|
|||
|
>
|
|||
|
<view
|
|||
|
class="menu-topic-view"
|
|||
|
v-for="item in tabs"
|
|||
|
:id="'tabNum' + item.id"
|
|||
|
:key="item.id - 1"
|
|||
|
@click="swichMenu(item.id - 1)"
|
|||
|
>
|
|||
|
<view
|
|||
|
:class="
|
|||
|
currentTab == item.id - 1 ? 'menu-topic-act' : 'menu-topic'
|
|||
|
"
|
|||
|
>
|
|||
|
<text class="menu-topic-text">{{ item.name }}</text>
|
|||
|
<view class="menu-topic-bottom">
|
|||
|
<view class="menu-topic-bottom-color" />
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</scroll-view>
|
|||
|
<!-- 内容 -->
|
|||
|
<swiper
|
|||
|
class="swiper-box-list"
|
|||
|
:current="currentTab"
|
|||
|
@change="swiperChange"
|
|||
|
>
|
|||
|
<swiper-item
|
|||
|
class="swiper-topic-list"
|
|||
|
v-for="(item, index) in tabs"
|
|||
|
:key="index"
|
|||
|
>
|
|||
|
<scroll-view class="tabs-item" scroll-y="true">
|
|||
|
<block v-if="item.name === '产品介绍'">
|
|||
|
<!-- <block> -->
|
|||
|
<view
|
|||
|
class="insur-card pro-introduce"
|
|||
|
v-for="(insurDetail, insurDetailIndex) in productPresentation"
|
|||
|
:key="insurDetailIndex"
|
|||
|
>
|
|||
|
<view class="card-title">
|
|||
|
<text>{{ insurDetail.title }}</text>
|
|||
|
</view>
|
|||
|
<view class="card-body">
|
|||
|
<view
|
|||
|
class="empty"
|
|||
|
v-if="
|
|||
|
insurProduct[insurDetail.name] === null ||
|
|||
|
insurProduct[insurDetail.name] === '' ||
|
|||
|
insurProduct[insurDetail.name] === undefined
|
|||
|
"
|
|||
|
><text>暂无内容</text></view
|
|||
|
>
|
|||
|
<view v-else
|
|||
|
><text>{{ insurProduct[insurDetail.name] }}</text></view
|
|||
|
>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</block>
|
|||
|
<block v-if="item.name === '保险说明'">
|
|||
|
<view
|
|||
|
class="insur-card pro-insur-details insurDetailIndex !== 0 ? 'mar-top' : ''}}"
|
|||
|
v-for="(insurDetail, insurDetailIndex) in insurSpecification"
|
|||
|
:key="insurDetailIndex"
|
|||
|
>
|
|||
|
<view class="card-title">
|
|||
|
<text>{{ insurDetail.title }}</text>
|
|||
|
</view>
|
|||
|
<view class="card-body">
|
|||
|
<view
|
|||
|
class="empty"
|
|||
|
v-if="
|
|||
|
insurProduct[insurDetail.name] === null ||
|
|||
|
insurProduct[insurDetail.name] === '' ||
|
|||
|
insurProduct[insurDetail.name] === undefined
|
|||
|
"
|
|||
|
><text>暂无内容</text></view
|
|||
|
>
|
|||
|
<text>{{ insurProduct[insurDetail.name] }}</text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</block>
|
|||
|
<block
|
|||
|
v-if="
|
|||
|
item.name === '理赔流程' &&
|
|||
|
insurProduct.claimProcess !== null &&
|
|||
|
insurProduct.claimProcess !== undefined &&
|
|||
|
insurProduct.claimProcess !== ''
|
|||
|
"
|
|||
|
>
|
|||
|
<view class="insur-card pro-procedure">
|
|||
|
<view class="insur-card card-body">
|
|||
|
<view class="claimProcess">
|
|||
|
<mp-html :content="insurProduct.claimProcess" />
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</block>
|
|||
|
<block v-else-if="item.name === '理赔流程'">
|
|||
|
<view
|
|||
|
class="insur-card card-body"
|
|||
|
style="text-align: center; padding: 10px; color: #717d71"
|
|||
|
>
|
|||
|
<view class="empty">
|
|||
|
<text>暂无内容</text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</block>
|
|||
|
<block
|
|||
|
v-if="
|
|||
|
item.name === '保险责任' &&
|
|||
|
insurProduct.liability !== null &&
|
|||
|
insurProduct.liability !== undefined &&
|
|||
|
insurProduct.liability !== ''
|
|||
|
"
|
|||
|
>
|
|||
|
<view class="insur-card pro-procedure">
|
|||
|
<view class="insur-card card-body">
|
|||
|
<view class="liability">
|
|||
|
<mp-html :content="insurProduct.liability" />
|
|||
|
<!-- <div v-html="insurProduct.liability" /> -->
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</block>
|
|||
|
<block v-else-if="item.name === '保险责任'">
|
|||
|
<view
|
|||
|
class="insur-card card-body"
|
|||
|
style="text-align: center; padding: 10px; color: #717d71"
|
|||
|
>
|
|||
|
<view class="empty">
|
|||
|
<text>暂无内容</text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</block>
|
|||
|
</scroll-view>
|
|||
|
</swiper-item>
|
|||
|
</swiper>
|
|||
|
</view>
|
|||
|
|
|||
|
<view class="page-foot">
|
|||
|
<view class="apply-for">
|
|||
|
<view class="app-for-relat"></view>
|
|||
|
<navigator
|
|||
|
:url="'#'"
|
|||
|
@click="navigator(options)"
|
|||
|
class="app-for-fixed"
|
|||
|
>
|
|||
|
<view class="center">
|
|||
|
<text>预约保险</text>
|
|||
|
</view>
|
|||
|
</navigator>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import {
|
|||
|
listInsuranceProduct,
|
|||
|
getInsuranceProduct,
|
|||
|
delInsuranceProduct,
|
|||
|
addInsuranceProduct,
|
|||
|
updateInsuranceProduct,
|
|||
|
changeProductEnable,
|
|||
|
} from "@/api/insurance/insuranceProduct";
|
|||
|
import { selectBaseInfo } from "@/api/enterprise/baseInfo";
|
|||
|
import { selectUserEntity } from "@/api/enterprise/userEntity";
|
|||
|
import mpHtml from '@/components/mp-html/mp-html';
|
|||
|
|
|||
|
export default {
|
|||
|
name: "insurProDetail",
|
|||
|
components: {
|
|||
|
mpHtml,
|
|||
|
},
|
|||
|
props: {},
|
|||
|
data() {
|
|||
|
return {
|
|||
|
haveEnterprise: false,
|
|||
|
heightToBeRemoved: 125,
|
|||
|
currentTab: 0,
|
|||
|
tabCurrent: "tabNum1",
|
|||
|
remheiClas: [".page-head", ".app-for-fixed", ".top-menu-view"],
|
|||
|
tabs: [
|
|||
|
{
|
|||
|
id: 1,
|
|||
|
name: "产品介绍",
|
|||
|
},
|
|||
|
{
|
|||
|
id: 2,
|
|||
|
name: "保险说明",
|
|||
|
},
|
|||
|
{
|
|||
|
id: 3,
|
|||
|
name: "理赔流程",
|
|||
|
},
|
|||
|
{
|
|||
|
id: 4,
|
|||
|
name: "保险责任",
|
|||
|
},
|
|||
|
],
|
|||
|
options: {},
|
|||
|
insurProduct: {},
|
|||
|
insurCom: {},
|
|||
|
insurProductList: [],
|
|||
|
insurSpecification: [
|
|||
|
{
|
|||
|
title: "适用人群",
|
|||
|
name: "application",
|
|||
|
},
|
|||
|
{
|
|||
|
title: "保障范围",
|
|||
|
name: "coverage",
|
|||
|
},
|
|||
|
{
|
|||
|
title: "投保要求",
|
|||
|
name: "requirement",
|
|||
|
},
|
|||
|
{
|
|||
|
title: "描述",
|
|||
|
name: "remark",
|
|||
|
},
|
|||
|
// {
|
|||
|
// title: "",
|
|||
|
// name: "",
|
|||
|
// },
|
|||
|
// {
|
|||
|
// title: "",
|
|||
|
// name: "",
|
|||
|
// },
|
|||
|
// {
|
|||
|
// title: "",
|
|||
|
// name: "",
|
|||
|
// },
|
|||
|
// {
|
|||
|
// title: "",
|
|||
|
// name: "",
|
|||
|
// },
|
|||
|
],
|
|||
|
productPresentation: [
|
|||
|
{
|
|||
|
title: "保险期限(月)",
|
|||
|
name: "insurancePeriod",
|
|||
|
},
|
|||
|
{
|
|||
|
title: "保费(元)",
|
|||
|
name: "premium",
|
|||
|
},
|
|||
|
{
|
|||
|
title: "保险金额(元)",
|
|||
|
name: "amount",
|
|||
|
},
|
|||
|
{
|
|||
|
title: "政府补贴比例(%)",
|
|||
|
name: "rate",
|
|||
|
},
|
|||
|
// {
|
|||
|
// title: "办理渠道",
|
|||
|
// name: "applicationChannel",
|
|||
|
// },
|
|||
|
// {
|
|||
|
// title: "适用对象",
|
|||
|
// name: "applicationUser",
|
|||
|
// },
|
|||
|
// {
|
|||
|
// title: "",
|
|||
|
// name: "",
|
|||
|
// },
|
|||
|
// {
|
|||
|
// title: "",
|
|||
|
// name: "",
|
|||
|
// },
|
|||
|
],
|
|||
|
};
|
|||
|
},
|
|||
|
watch: {
|
|||
|
haveEnterprise: {
|
|||
|
handler: function (val, oldVal) {
|
|||
|
if (this.haveEnterprise === true) {
|
|||
|
this.getBaseInfo();
|
|||
|
}
|
|||
|
},
|
|||
|
deep: true,
|
|||
|
},
|
|||
|
},
|
|||
|
mounted() {
|
|||
|
// this.$nextTick(function () {
|
|||
|
// let removeHeight = 0;
|
|||
|
// for (let remheicla of this.remheiClas) {
|
|||
|
// let pageHead = uni.createSelectorQuery().select(remheicla);
|
|||
|
// pageHead
|
|||
|
// .fields({ size: true }, (data) => {
|
|||
|
// removeHeight = removeHeight + data.height;
|
|||
|
// })
|
|||
|
// .exec();
|
|||
|
// }
|
|||
|
// this.heightToBeRemoved = removeHeight;
|
|||
|
// });
|
|||
|
},
|
|||
|
|
|||
|
onLoad(options) {
|
|||
|
this.getRouter(options);
|
|||
|
this.getById();
|
|||
|
},
|
|||
|
onShow() {
|
|||
|
this.getEnterprise();
|
|||
|
},
|
|||
|
methods: {
|
|||
|
confirmCreateEnterPrise() {
|
|||
|
this.$modal.confirm("请先创建经营主体").then((res) => {
|
|||
|
if (res === true) {
|
|||
|
this.$tab.navigateTo("/pages/formPages/enterprise/baseInfo/index");
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
navigator(item, isNew) {
|
|||
|
if (this.haveEnterprise === true) {
|
|||
|
this.$tab
|
|||
|
.navigateTo(
|
|||
|
"/pages/formPages/insur/openInsurForm/index?insurProductId=" +
|
|||
|
item.id +
|
|||
|
"&baseinfoId=" +
|
|||
|
item.baseinfoId
|
|||
|
)
|
|||
|
.then((res) => {
|
|||
|
if (res[0] !== null) {
|
|||
|
this.$modal.showToast("模块建设中~");
|
|||
|
}
|
|||
|
});
|
|||
|
} else if (
|
|||
|
!this.$auth.hasRole("admin") &&
|
|||
|
this.$auth.hasRole("enterprise")
|
|||
|
) {
|
|||
|
this.confirmCreateEnterPrise();
|
|||
|
} else {
|
|||
|
this.$modal.confirm("非主体用户无法拥有主体!").then(() => {});
|
|||
|
}
|
|||
|
},
|
|||
|
getEnterprise() {
|
|||
|
selectUserEntity().then((response) => {
|
|||
|
if (response.data.length !== 0) {
|
|||
|
this.haveEnterprise = true;
|
|||
|
} else {
|
|||
|
this.haveEnterprise = false;
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
getBaseInfo() {
|
|||
|
selectBaseInfo().then((response) => {
|
|||
|
let baseInfo = response.data;
|
|||
|
this.$set(this.options, "baseinfoId", baseInfo.id);
|
|||
|
});
|
|||
|
},
|
|||
|
getMsg(yes_no) {
|
|||
|
if (yes_no === true) {
|
|||
|
this.$modal.msgSuccess("提交申请成功");
|
|||
|
} else if (yes_no === false) {
|
|||
|
this.$modal.msgSuccess("申请修改成功");
|
|||
|
} else if (yes_no === undefined) {
|
|||
|
} else {
|
|||
|
this.$modal.msgError("提交申请失败");
|
|||
|
}
|
|||
|
},
|
|||
|
thumbLink(lenderName) {
|
|||
|
switch (lenderName) {
|
|||
|
case "中国邮政储蓄银行股份有限公司":
|
|||
|
return "../../../../static/images/index/zgyz.png";
|
|||
|
case "邮政储蓄银行":
|
|||
|
return "../../../../static/images/index/zgyz.png";
|
|||
|
case "中国农业银行":
|
|||
|
return "../../../../static/images/index/nyyh.png";
|
|||
|
default:
|
|||
|
return "../../../../static/images/index/no-photo.png";
|
|||
|
}
|
|||
|
},
|
|||
|
swichMenu(id) {
|
|||
|
this.currentTab = id;
|
|||
|
this.tabCurrent = "tabNum" + id;
|
|||
|
},
|
|||
|
swiperChange(e) {
|
|||
|
let index = e.detail.current;
|
|||
|
this.swichMenu(index);
|
|||
|
},
|
|||
|
async getRouter(options) {
|
|||
|
this.options = options;
|
|||
|
},
|
|||
|
getById() {
|
|||
|
this.$modal.loading("加载中,请耐心等待...");
|
|||
|
getInsuranceProduct(this.options.id).then((res) => {
|
|||
|
this.insurProduct = res.data;
|
|||
|
this.$modal.closeLoading();
|
|||
|
});
|
|||
|
},
|
|||
|
},
|
|||
|
|
|||
|
};
|
|||
|
</script>
|
|||
|
|
|||
|
<style scoped lang="scss">
|
|||
|
// --heightToBeRemoved:heighttoberemoved
|
|||
|
.page-head {
|
|||
|
padding: 0px;
|
|||
|
background-color: white;
|
|||
|
}
|
|||
|
|
|||
|
.page-body {
|
|||
|
margin-top: 15rpx;
|
|||
|
}
|
|||
|
|
|||
|
.page-foot {
|
|||
|
margin: 0px;
|
|||
|
padding: 0px;
|
|||
|
// height: 80rpx;
|
|||
|
}
|
|||
|
|
|||
|
.head-top {
|
|||
|
display: flex;
|
|||
|
text-align: left;
|
|||
|
position: relative;
|
|||
|
padding: 10px;
|
|||
|
}
|
|||
|
|
|||
|
.head-top::after {
|
|||
|
content: "";
|
|||
|
border-bottom: 1rpx #e0e0e0 solid;
|
|||
|
position: absolute;
|
|||
|
bottom: -5rpx;
|
|||
|
left: 0rpx;
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
.image-view {
|
|||
|
width: 240rpx;
|
|||
|
height: 240rpx;
|
|||
|
}
|
|||
|
|
|||
|
.image-view image {
|
|||
|
width: 240rpx;
|
|||
|
height: 240rpx;
|
|||
|
}
|
|||
|
|
|||
|
.insur-pro-info {
|
|||
|
padding-top: 10px;
|
|||
|
}
|
|||
|
|
|||
|
.insur-pro-name {
|
|||
|
font-weight: 600;
|
|||
|
}
|
|||
|
|
|||
|
.bank {
|
|||
|
margin-top: 10px;
|
|||
|
font-size: 14px;
|
|||
|
}
|
|||
|
|
|||
|
.head-bottom {
|
|||
|
margin-top: 15rpx;
|
|||
|
display: flex;
|
|||
|
justify-content: space-around;
|
|||
|
font-size: 35rpx;
|
|||
|
}
|
|||
|
|
|||
|
.head-bottom > view {
|
|||
|
width: 33%;
|
|||
|
}
|
|||
|
|
|||
|
.head-bottom > view > view {
|
|||
|
overflow: hidden;
|
|||
|
text-overflow: ellipsis;
|
|||
|
white-space: nowrap;
|
|||
|
}
|
|||
|
|
|||
|
.head-bottom .label {
|
|||
|
color: #5a5a5a;
|
|||
|
font-size: 20rpx;
|
|||
|
}
|
|||
|
|
|||
|
.head-bottom .pro-mar .content .rate {
|
|||
|
color: orange;
|
|||
|
}
|
|||
|
|
|||
|
.weui-tabs-bar__content {
|
|||
|
display: flex;
|
|||
|
justify-content: space-around;
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
|
|||
|
.weui-tabs-bar__content::before {
|
|||
|
content: "";
|
|||
|
position: absolute;
|
|||
|
width: 100%;
|
|||
|
border-bottom: #f1f1f1 2px solid;
|
|||
|
bottom: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.weui-tabs-bar__title {
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
|
|||
|
.weui-tabs .weui-tabs-swiper {
|
|||
|
height: calc(100vh - 100px) !important;
|
|||
|
}
|
|||
|
|
|||
|
.weui-tabs swiper {
|
|||
|
height: 100vh !important;
|
|||
|
|
|||
|
overflow: unset;
|
|||
|
}
|
|||
|
|
|||
|
.weui-tabs swiper-item {
|
|||
|
height: auto !important;
|
|||
|
overflow: unset;
|
|||
|
}
|
|||
|
|
|||
|
.tab-bar-title_selected {
|
|||
|
color: #1B7AF5;
|
|||
|
}
|
|||
|
|
|||
|
.swiper-topic-list {
|
|||
|
color: #1B7AF5;
|
|||
|
}
|
|||
|
|
|||
|
.tab-content {
|
|||
|
height: 100vh;
|
|||
|
overflow: scroll;
|
|||
|
}
|
|||
|
|
|||
|
.insur-card {
|
|||
|
width: 100%;
|
|||
|
background-color: white;
|
|||
|
border: 0px !important;
|
|||
|
}
|
|||
|
|
|||
|
.mar-top {
|
|||
|
margin-top: 15rpx;
|
|||
|
}
|
|||
|
|
|||
|
.card-title {
|
|||
|
margin: 15rpx;
|
|||
|
margin-left: 0;
|
|||
|
padding: 15rpx 15rpx 15rpx 55rpx;
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
|
|||
|
.card-title::before {
|
|||
|
content: "";
|
|||
|
position: absolute;
|
|||
|
width: 10rpx;
|
|||
|
height: 40rpx;
|
|||
|
background-color: #1B7AF5;
|
|||
|
display: inline-block;
|
|||
|
line-height: 20rpx;
|
|||
|
margin-left: -30rpx;
|
|||
|
transform: translateY(5%);
|
|||
|
}
|
|||
|
|
|||
|
.card-title::after {
|
|||
|
content: "";
|
|||
|
position: absolute;
|
|||
|
width: 100vw;
|
|||
|
left: 0px;
|
|||
|
bottom: 0px;
|
|||
|
border-bottom: #f1f1f1 1px solid;
|
|||
|
}
|
|||
|
|
|||
|
.card-body {
|
|||
|
font-size: 15px;
|
|||
|
margin: 15rpx;
|
|||
|
margin-left: 0;
|
|||
|
padding: 10rpx 15rpx 30rpx 40rpx;
|
|||
|
position: relative;
|
|||
|
border-bottom: #ebebeb 1px solid;
|
|||
|
color: #7a7a7a;
|
|||
|
|
|||
|
.empty {
|
|||
|
color: #bbb;
|
|||
|
}
|
|||
|
|
|||
|
.claimProcess {
|
|||
|
// padding-right: 25rpx;
|
|||
|
width: calc(100vw - 80rpx);
|
|||
|
|
|||
|
:not(not) {
|
|||
|
max-width: calc(100vw - 80rpx);
|
|||
|
word-wrap: break-word;
|
|||
|
white-space: break-spaces;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.liability {
|
|||
|
// padding-right: 25rpx;
|
|||
|
width: calc(100vw - 80rpx);
|
|||
|
|
|||
|
:not(not) {
|
|||
|
max-width: calc(100vw - 80rpx);
|
|||
|
word-wrap: break-word;
|
|||
|
white-space: break-spaces;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/* .card-body{
|
|||
|
display:;
|
|||
|
position: fixed;
|
|||
|
} */
|
|||
|
|
|||
|
.apply-for {
|
|||
|
height: 100%;
|
|||
|
width: 100vw;
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
|
|||
|
.apply-for view {
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
|
|||
|
.apply-for .app-for-fixed {
|
|||
|
bottom: 0px;
|
|||
|
width: 100%;
|
|||
|
height: 6vh;
|
|||
|
position: fixed;
|
|||
|
background-color: #1B7AF5;
|
|||
|
font-size: 15px;
|
|||
|
color: white;
|
|||
|
|
|||
|
.center {
|
|||
|
position: relative;
|
|||
|
|
|||
|
text {
|
|||
|
position: absolute;
|
|||
|
margin-top: 1vh;
|
|||
|
// margin: auto 0px;
|
|||
|
// transform: translateY(50%);
|
|||
|
// transform: rotateX(5);
|
|||
|
|
|||
|
/deep/span {
|
|||
|
margin-left: -100%;
|
|||
|
// margin-top: 100%;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.page-body {
|
|||
|
position: relative;
|
|||
|
|
|||
|
.body-view {
|
|||
|
position: relative;
|
|||
|
// top: ;
|
|||
|
.top-menu-view {
|
|||
|
z-index: 3;
|
|||
|
display: flex;
|
|||
|
// position: fixed;
|
|||
|
// top: 100rpx;
|
|||
|
top: calc(44px + env(safe-area-inset-top));
|
|||
|
left: 0;
|
|||
|
white-space: nowrap;
|
|||
|
width: 100%;
|
|||
|
background-color: #ffffff;
|
|||
|
height: 86rpx;
|
|||
|
line-height: 86rpx;
|
|||
|
border-top: 1rpx solid #d8dbe6;
|
|||
|
|
|||
|
.menu-topic-view {
|
|||
|
display: inline-block;
|
|||
|
white-space: nowrap;
|
|||
|
height: 86rpx;
|
|||
|
position: relative;
|
|||
|
|
|||
|
.menu-topic-text {
|
|||
|
font-size: 30rpx;
|
|||
|
color: #303133;
|
|||
|
padding: 10rpx 40rpx;
|
|||
|
}
|
|||
|
|
|||
|
.menu-topic-bottom {
|
|||
|
position: absolute;
|
|||
|
bottom: 0;
|
|||
|
width: 100%;
|
|||
|
|
|||
|
.menu-topic-bottom-color {
|
|||
|
width: 40rpx;
|
|||
|
height: 4rpx;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.menu-topic-act .menu-topic-bottom {
|
|||
|
display: flex;
|
|||
|
justify-content: center;
|
|||
|
}
|
|||
|
|
|||
|
.menu-topic-act .menu-topic-bottom-color {
|
|||
|
background: #3d7eff;
|
|||
|
min-height: 2px;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.swiper-box-list {
|
|||
|
width: 100%;
|
|||
|
padding-top: 11px;
|
|||
|
flex: 1;
|
|||
|
background-color: #ffffff;
|
|||
|
// height: 100px;
|
|||
|
height: calc(
|
|||
|
100vh -
|
|||
|
calc(
|
|||
|
var(--height-to-be-removed) + 6px + var(--status-bar-height) +
|
|||
|
calc(44px + env(safe-area-inset-top))
|
|||
|
)
|
|||
|
);
|
|||
|
|
|||
|
.swiper-topic-list {
|
|||
|
width: 100%;
|
|||
|
// height: calc(calc(auto) + calc(44px));
|
|||
|
// padding-bottom: 44px;
|
|||
|
|
|||
|
.tabs-item {
|
|||
|
height: calc(
|
|||
|
100vh -
|
|||
|
calc(
|
|||
|
var(--height-to-be-removed) + 6px + 11px +
|
|||
|
var(--status-bar-height) + calc(44px + env(safe-area-inset-top))
|
|||
|
)
|
|||
|
);
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</style>
|