123
This commit is contained in:
parent
1527c9b350
commit
1ea2b60e04
4
App.vue
4
App.vue
@ -144,13 +144,13 @@
|
||||
// 匹配并更新已有 style 属性的 img 标签
|
||||
html = html.replace(/(<img\b[^>]*\bstyle\s*=\s*['"])([^'"]*)(['"][^>]*>)/g,
|
||||
function(match, p1, p2, p3) {
|
||||
return p1 + ';width: 100%;margin:0 auto;' + p3;
|
||||
return p1 + ';width: 100%;border-radius: 10px;margin:0 auto;' + p3;
|
||||
});
|
||||
|
||||
// 匹配并添加 style 属性到没有 style 属性的 img 标签
|
||||
html = html.replace(/(<img\b(?![^>]*\bstyle\s*=)[^>]*>)/g,
|
||||
function(match, p1) {
|
||||
return p1.replace(/\/?>$/, ' style="width: 100%;margin:0 auto;" />');
|
||||
return p1.replace(/\/?>$/, ' style="width: 100%;border-radius: 10px;margin:0 auto;" />');
|
||||
});
|
||||
|
||||
return html;
|
||||
|
||||
@ -216,6 +216,11 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "河南省青年企业家协会"
|
||||
}
|
||||
}, {
|
||||
"path": "news/new_list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "河南省青年企业家协会"
|
||||
}
|
||||
}]
|
||||
}],
|
||||
"globalStyle": {
|
||||
|
||||
@ -1,109 +1,114 @@
|
||||
<template>
|
||||
<view style="background-color: #EBF4F7;letter-spacing: 1rpx;" @touchmove="preventTouchMove">
|
||||
<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
|
||||
<view style="background: #F1F2F8;">
|
||||
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#ffffff">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- <view style="padding-left: 15rpx;" @click="goBack()">
|
||||
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
|
||||
</view> -->
|
||||
<view class="tn-margin-top"
|
||||
style=";text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
|
||||
|
||||
<tn-tabs :list="[{name:'通讯录'}]" :current="topCurrent" activeColor="#000" :bold="false"
|
||||
:fontSize="36"></tn-tabs>
|
||||
<view style="width: 100%;">
|
||||
<view
|
||||
style="text-align: center;font-size: 34rpx;color: #000000;letter-spacing: 1px;font-weight: bold;">
|
||||
<text>通讯录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
|
||||
<view class="justify-content-item align-content-item" style="width: 100%;">
|
||||
<view class="tn-flex tn-flex-col-center"
|
||||
style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 95%;background-color: #ffffff;">
|
||||
<text
|
||||
class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
|
||||
<input v-model="serach_content" class="justify-content-item" placeholder="会员姓名/手机号" name="input"
|
||||
placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="align-content-item">
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<tn-button @click="serach_do" backgroundColor="#3668fc" shape="round" padding="20rpx 20rpx"
|
||||
width="150rpx">
|
||||
<text class="tn-color-white">搜 索</text>
|
||||
</tn-button>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"
|
||||
style="background-color: #FFF;padding-bottom: 30rpx;z-index: 200;">
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
|
||||
<view class="justify-content-item align-content-item" style="width: 100%;position: relative;">
|
||||
<view class="tn-flex tn-flex-col-center"
|
||||
style="border-radius: 100rpx;padding: 20rpx;width: 100%;background-color:#F1F2F8;">
|
||||
<text style="color: #BABDC7;"
|
||||
class="tn-icon-search justify-content-item tn-padding-right-xs tn-text-lg"></text>
|
||||
<input v-model="serach_content" class="justify-content-item" placeholder="请会员姓名/手机号进行搜索"
|
||||
name="input" placeholder-style="color:#BABDC7"
|
||||
style="width: 100%;padding-right: 200rpx;"></input>
|
||||
</view>
|
||||
<view style="position: absolute;right: 10rpx;top: 10rpx">
|
||||
<tn-button backgroundColor="rgba(48,86,211,0.1)" shape="round" padding="20rpx 20rpx"
|
||||
width="150rpx" @click="serach_do()">
|
||||
<text style="color:#3056D3;font-weight: bold;">搜 索</text>
|
||||
</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-flex tn-flex-col-center tn-flex-row-between" @click="selectShow= true"
|
||||
style="padding: 30rpx;">
|
||||
<view>
|
||||
<text>{{HomeTitle}}</text>
|
||||
<text class="tn-icon-down-triangle"></text>
|
||||
</view>
|
||||
<view>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="tn-classify__container">
|
||||
<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around my-page"
|
||||
style="background-color: #EBF4F7;">
|
||||
<!-- 左边容器 -->
|
||||
<view class="tn-classify__left-box left-width">
|
||||
<view v-for="(item, index) in industry_list" :key="index" :id="`tabbar_item_${index}`"
|
||||
style="padding-left: 20rpx;" class="tn-classify__tabbar__item tn-flex tn-flex-col-center"
|
||||
:class="[tabbarItemClass(index)]" @tap.stop="clickClassifyNav(index)">
|
||||
<view class="tn-classify__tabbar__item__title">{{ item.industry_name }}</view>
|
||||
</view>
|
||||
<view :class="isFixed?'fixed':'abc'" style="width: 100%;z-index: 200;"
|
||||
:style="{top:isFixed?vuex_custom_bar_height+'px':'auto'}">
|
||||
<view class="tn-flex tn-flex-col-center" style="padding: 30rpx;background-color: #ffffff;">
|
||||
<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
|
||||
<text :class="openDqShow?'textThis':'textNo'">地区</text>
|
||||
<text style="color: #BABDC7;"
|
||||
:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
|
||||
</view>
|
||||
|
||||
<!-- 右边容器 -->
|
||||
<scroll-view class="tn-classify__right-box" @scroll="getScroll" :scroll-top="top" scroll-y
|
||||
style="width: 72%">
|
||||
<block>
|
||||
<view class="tn-classify__content">
|
||||
<!-- 分类内容子栏目 -->
|
||||
<view class="tn-classify__content__sub-classify__content " style="padding-bottom: 120rpx;">
|
||||
<view v-for="(item,index) in list" :key="index">
|
||||
<view v-if="item.neirong"
|
||||
style="font-weight: 300;;background-color: #EBF4F7;color:#4AA2EF;width: 100%;height: 60rpx;line-height: 60rpx;text-align: center;">
|
||||
{{item.position_name}}
|
||||
</view>
|
||||
<view v-if="item.neirong" v-for="(v,k) in item.neirong"
|
||||
@click="tn('/pages/packageA/user/my_card?id='+v.member_id)"
|
||||
class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-center tn-flex-col-center">
|
||||
<!-- 标题，有需要可以显示出来 -->
|
||||
<view style="width: 100rpx;height: 100rpx">
|
||||
<image :src="apiImgUrl+v.photo_image"
|
||||
style="width: 100rpx;height: 100rpx;border-radius:50%;">
|
||||
</image>
|
||||
</view>
|
||||
<view style="margin-left: 20rpx;">
|
||||
<view style="font-size: 28rpx;">
|
||||
<text>{{v.nikename}}</text>
|
||||
<text style="margin-left: 50rpx;">{{v.nation}}</text>
|
||||
</view>
|
||||
<view class="tn-text-ellipsis-2"
|
||||
style="font-size: 24rpx;margin-top: 10rpx;">
|
||||
<text>{{v.enterprise_name==null?'':v.enterprise_name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
|
||||
<view :class="openDqShow?'textThis tn-text-ellipsis':'textNo tn-text-ellipsis'"
|
||||
style="max-width: 120rpx;display: inline-block;vertical-align: middle;">
|
||||
{{hy_name=='全部'?'行业':hy_name}}
|
||||
</view>
|
||||
<text style="color: #BABDC7;vertical-align: middle;"
|
||||
:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
|
||||
</view>
|
||||
<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
|
||||
<text :class="openDqShow?'textThis':'textNo'">届数</text>
|
||||
<text style="color: #BABDC7;"
|
||||
:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
|
||||
</view>
|
||||
<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
|
||||
<text :class="openDqShow?'textThis':'textNo'">组织架构</text>
|
||||
<text style="color: #BABDC7;"
|
||||
:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="openDqShow">
|
||||
<view style="border-radius: 0 0 20rpx 20rpx;background-color: #ffffff;padding-bottom: 30rpx;">
|
||||
<scroll-view scroll-y="" style="height: 500rpx;">
|
||||
<view v-for="(item,index) in industry_list" @click="clickClassifyNav(index)"
|
||||
style="padding: 20rpx 30rpx;font-size: 28rpx;">
|
||||
<view :class="item.id==leftId?'textThis':'textNo'">{{item.industry_name}}</view>
|
||||
<view v-if="index<industry_list.length-1"
|
||||
style="width: 100%;height: 1px;background-color: #F1F2F8;margin-top: 30rpx;"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="openDqShow" @click="openDqShow = false" @touchmove.stop.prevent="() => {}"
|
||||
style="position: absolute;width: 100%;height:100%;background-color: rgba(0, 0,0, 0.3);z-index: 100;"></view>
|
||||
<view style="padding:120rpx 30rpx 100rpx 30rpx;">
|
||||
<view style="overflow: hidden;">
|
||||
<view v-for="(item,index) in list" :key="index"
|
||||
style="border-radius: 20rpx;margin-bottom:30rpx;background-color: #ffffff;">
|
||||
<view
|
||||
style="border-radius: 20rpx 20rpx 0rpx 0rpx;background: #E6E8F1;text-align: center;font-size: 34rpx;font-weight: bold;height: 110rpx;line-height: 110rpx;">
|
||||
{{item.position_name}}
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="item.neirong" v-for="(v,k) in item.neirong"
|
||||
@click="tn('/pages/packageA/user/my_card?id='+v.member_id)"
|
||||
class="tn-flex tn-flex-center tn-flex-col-center" style="padding: 35rpx;">
|
||||
<view style="width: 100rpx;height: 100rpx">
|
||||
<image :src="apiImgUrl+v.photo_image"
|
||||
style="width: 100rpx;height: 100rpx;border-radius:50%;">
|
||||
</image>
|
||||
</view>
|
||||
<view style="margin-left: 20rpx;">
|
||||
<view>
|
||||
<text
|
||||
style="font-size: 32rpx;font-weight: bold;vertical-align: middle;">{{v.nikename}}</text>
|
||||
<tn-tag size="sm" padding="0px 5px" margin="0 0 0 20rpx" width="auto" shape="radius"
|
||||
backgroundColor="#F1F2F8" fontColor="#888888">{{v.position_name}}</tn-tag>
|
||||
</view>
|
||||
<view v-if="list.length==0" style="text-align: center;padding: 20rpx">
|
||||
暂无
|
||||
<view class="tn-text-ellipsis-2"
|
||||
style="font-size: 28rpx;margin-top: 10rpx;color: #666666;">
|
||||
<text>{{v.enterprise_name==null?v.work_unit:v.enterprise_name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showNo" style="margin-top: 30px;text-align: center">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view @click="tn('/pages/index/apply_in')" style="line-height: 40rpx;text-align: center;position: fixed;bottom:15%;right: 20rpx;width: 120rpx;height: 120rpx;border-radius: 50%;background: linear-gradient(270deg, #EE7E45, #EE9657);-->
|
||||
<!--box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(12,0,5,0.2);">-->
|
||||
<!-- <view style="color: #fff;letter-spacing: 2rpx;padding: 20rpx;font-size: 32rpx;">申请入会-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<tn-select :safeAreaInsetBottom="true" v-model="selectShow" mode="single" :list="selectList"
|
||||
@confirm="confirm"></tn-select>
|
||||
</view>
|
||||
@ -119,20 +124,14 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showNo: false,
|
||||
isFixed: false,
|
||||
serach_content: '',
|
||||
list: [],
|
||||
topCurrent: 0,
|
||||
tabbarIndex: 0,
|
||||
// 分类菜单item的信息
|
||||
tabbarItemInfo: [],
|
||||
// scrollView的top值
|
||||
scrollViewBasicTop: 0,
|
||||
// scrollView的高度
|
||||
scrollViewHeight: 0,
|
||||
// 左边scrollView的滚动高度
|
||||
leftScrollViewTop: 0,
|
||||
// 右边scrollView的滚动高度
|
||||
rightScrollViewTop: 0,
|
||||
// 当前选中的tabbar序号
|
||||
currentTabbarIndex: 0,
|
||||
apiImgUrl: this.$store.state.imgUrl,
|
||||
@ -143,25 +142,9 @@
|
||||
selectList: [],
|
||||
gid: store.state.Gid,
|
||||
top: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabbarItemClass() {
|
||||
return index => {
|
||||
if (index === this.currentTabbarIndex) {
|
||||
return 'tn-classify__tabbar__item--active tn-bg-white'
|
||||
} else {
|
||||
let clazz = ''
|
||||
if (this.currentTabbarIndex > 0 && index === this.currentTabbarIndex - 1) {
|
||||
clazz += ' tn-classify__tabbar__item--active--prev'
|
||||
}
|
||||
if (this.currentTabbarIndex < this.industry_list.length && index === this.currentTabbarIndex +
|
||||
1) {
|
||||
clazz += ' tn-classify__tabbar__item--active--next'
|
||||
}
|
||||
return clazz
|
||||
}
|
||||
}
|
||||
openDqShow: false,
|
||||
selectTopNumber: 220,
|
||||
hy_name: '全部',
|
||||
}
|
||||
},
|
||||
onLoad(d) {
|
||||
@ -173,9 +156,6 @@
|
||||
this.getAssociationIndex();
|
||||
},
|
||||
methods: {
|
||||
preventTouchMove() {
|
||||
|
||||
},
|
||||
serach_do() {
|
||||
this.list = [];
|
||||
this.getAddressList();
|
||||
@ -232,7 +212,7 @@
|
||||
});
|
||||
this.industry_list.unshift({
|
||||
id: 0,
|
||||
industry_name: '组织架构'
|
||||
industry_name: '全部'
|
||||
});
|
||||
this.leftId = res.data[0].id;
|
||||
uni.showLoading({
|
||||
@ -260,6 +240,8 @@
|
||||
console.log(res);
|
||||
if (res.code == 1) {
|
||||
this.list = res.data.ret;
|
||||
} else {
|
||||
this.showNo = true;
|
||||
}
|
||||
setTimeout(function() {
|
||||
uni.hideLoading();
|
||||
@ -277,36 +259,23 @@
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
this.isFixed = false;
|
||||
this.showNo = false;
|
||||
this.openDqShow = false;
|
||||
this.currentTabbarIndex = index;
|
||||
this.leftId = this.industry_list[index].id;
|
||||
this.hy_name = this.industry_list[index].industry_name;
|
||||
this.list = [];
|
||||
this.top = this.randomBetween();
|
||||
this.getAddressList();
|
||||
//this.handleLeftScrollView(index)
|
||||
//this.switchClassifyContent();
|
||||
},
|
||||
randomBetween() {
|
||||
let baseRandom = Math.random() * (0.99999 - 0.00001) + 0.00001;
|
||||
return baseRandom.toFixed(5); //
|
||||
},
|
||||
// 点击分类后，处理scrollView滚动到居中位置
|
||||
handleLeftScrollView(index) {
|
||||
const tabbarItemTop = this.tabbarItemInfo[index].top - this.scrollViewBasicTop
|
||||
if (tabbarItemTop > this.scrollViewHeight / 2) {
|
||||
this.leftScrollViewTop = tabbarItemTop - (this.scrollViewHeight / 2) + this.tabbarItemInfo[index]
|
||||
.height
|
||||
ReachScroll(e) {
|
||||
//当距离大于20的时候吸顶
|
||||
if (e.detail.scrollTop > 100) {
|
||||
this.isFixed = true;
|
||||
} else {
|
||||
this.leftScrollViewTop = 0
|
||||
this.isFixed = false;
|
||||
}
|
||||
},
|
||||
// 切换对应分类的数据
|
||||
switchClassifyContent() {
|
||||
this.rightScrollViewTop = 1
|
||||
this.$nextTick(() => {
|
||||
this.rightScrollViewTop = 0
|
||||
})
|
||||
//this.classifyContent.subClassify[0].title = this.tabbar[this.currentTabbarIndex]
|
||||
},
|
||||
tn(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
@ -439,4 +408,21 @@
|
||||
height: calc(100vh - 286rpx);
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.textThis {
|
||||
color: #3056D3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.textNo {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.abc {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@ -43,9 +43,11 @@
|
||||
<view style="padding:0rpx 30rpx;">
|
||||
<view
|
||||
style="background: linear-gradient( 90deg, #446BEB 0%, #6ADCF5 100%);border-radius: 0px 0px 20rpx 20rpx;;">
|
||||
<tn-notice-bar fontColor="#FFFFFF" :list="new_top_list" @click="openInfo" leftIconType="img"
|
||||
mode="vertical" :rightIcon="false" backgroundColor="transparent" @clickRight="openRight"
|
||||
@clickLeft="openRight"></tn-notice-bar>
|
||||
<tn-notice-bar fontColor="#FFFFFF" :list="new_top_list" leftIconType="img" mode="vertical"
|
||||
:rightIcon="false" backgroundColor="transparent"></tn-notice-bar>
|
||||
<!-- <tn-notice-bar fontColor="#FFFFFF" :list="new_top_list" @click="openInfo" leftIconType="img"
|
||||
mode="vertical" :rightIcon="false" backgroundColor="transparent" @clickRight="openRight"
|
||||
@clickLeft="openRight"></tn-notice-bar> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="indication">
|
||||
@ -82,7 +84,7 @@
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-flex-row-center"
|
||||
style="padding: 0px 28rpx;margin-top: 20rpx">
|
||||
<view @click="openUrl('/pages/index/pizz_info?id='+association_id)"
|
||||
<view @click="openUrl('/pages/index/pizz_info?id=1')"
|
||||
style="position:relative;padding: 20rpx;border-radius: 16rpx;height: 130rpx;width: 100%;background: rgba(160,151,255,0.2);">
|
||||
<view style="font-size: 32rpx;font-weight: 600;;color: #181818;">协会简介</view>
|
||||
<view
|
||||
@ -95,7 +97,7 @@
|
||||
</image>
|
||||
</view>
|
||||
<view style="width: 100%;margin-left: 20rpx">
|
||||
<view @click="openUrl('/pages/index/service?type='+4)"
|
||||
<view @click="openUrl('/pages/packageB/news/new_list')"
|
||||
style="position:relative;padding: 20rpx;border-radius: 16rpx;height: 130rpx;background: rgba(72,219,122,0.2);">
|
||||
<view style="font-size: 32rpx;font-weight: 600;;color: #181818;">实时资讯</view>
|
||||
<view style="font-size: 24rpx;margin-top: 10rpx;color: rgba(24,24,24,0.5);">Member map</view>
|
||||
@ -220,7 +222,7 @@
|
||||
activeColor="#3056D3" :current="current" name="name" @change="change" :fontSize="28"></tn-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding:0px 30rpx;padding-bottom: 20rpx;min-height:1000rpx;">
|
||||
<view style="padding:0px 30rpx;padding-bottom: 20rpx;min-height:500rpx;">
|
||||
<view style="background-color: #ffffff;border-radius: 0rpx 0rpx 20rpx 20rpx;">
|
||||
<view v-for="(item,index) in news_list" :class="{'rounded_corner': index === 0}">
|
||||
<view class="tn-flex tn-flex-row-between" @click="openNewUrl(item)"
|
||||
@ -566,7 +568,7 @@
|
||||
this.current = e;
|
||||
var info = this.goryList[e];
|
||||
this.gory_id = info.id;
|
||||
this.type = e === 0 ? 1 : 0;
|
||||
this.type = 0;
|
||||
this.page = 1;
|
||||
this.news_list = [];
|
||||
this.getNewsList();
|
||||
|
||||
@ -11,11 +11,10 @@
|
||||
<Service ref="service"></Service>
|
||||
</scroll-view>
|
||||
</view> -->
|
||||
<view @touchmove="preventTouchMove" v-if=" tabberPageLoadFlag[1]"
|
||||
:style="{display: currentIndex === 1 ? '' : 'none'}">
|
||||
<view :class="tabShow?'custom-tabbar-page':''">
|
||||
<view v-if=" tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
|
||||
<scroll-view @scroll="directoryScroll" scroll-y enable-back-to-top :class="tabShow?'custom-tabbar-page':''">
|
||||
<Directory ref="directory"></Directory>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
|
||||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||||
@ -81,7 +80,7 @@
|
||||
// out: true
|
||||
// },
|
||||
{
|
||||
title: '发现',
|
||||
title: '青企圈',
|
||||
activeIcon: '/static/03_3.png',
|
||||
inactiveIcon: '/static/03.png',
|
||||
id: 2,
|
||||
@ -196,6 +195,9 @@
|
||||
homeScroll(d) {
|
||||
this.$refs.home.ReachScroll(d);
|
||||
},
|
||||
directoryScroll(d) {
|
||||
this.$refs.directory.ReachScroll(d);
|
||||
},
|
||||
|
||||
// 切换导航页面
|
||||
_switchTabbarPage(index) {
|
||||
|
||||
@ -1,118 +1,19 @@
|
||||
<template>
|
||||
<view style="background-color: #EBF4F7;letter-spacing: 1rpx;min-height: 100vh;">
|
||||
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<view class="tn-margin-top" style="text-align: center;">
|
||||
<text>发现</text>
|
||||
<view style="background-color: #F1F2F8;letter-spacing: 1rpx;min-height: 100vh;">
|
||||
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#ffffff">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view style="width: 100%;">
|
||||
<view
|
||||
style="text-align: center;font-size: 34rpx;color: #000000;letter-spacing: 1px;font-weight: bold;">
|
||||
<text>青企圈</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"
|
||||
style="background-color: #ffffff;padding-bottom: 10rpx;">
|
||||
<view style="padding:0rpx 20rpx">
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin"
|
||||
style="background-color: #ffffff;">
|
||||
<view class="justify-content-item align-content-item" style="width: 100%;">
|
||||
<view class="tn-flex tn-flex-col-center"
|
||||
style="border-radius: 100rpx;padding: 15rpx 20rpx;width: 100%;background-color:#F1F2F8;">
|
||||
<text
|
||||
class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
|
||||
<input @confirm="onsubmit()" confirm-type="search" v-model="content"
|
||||
class="justify-content-item" placeholder="请输入协会名称进行搜索" name="input"
|
||||
placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view>
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<tn-button backgroundColor="#3668fc" shape="round" padding="20rpx 20rpx" width="150rpx"
|
||||
@click="onsubmit()">
|
||||
<text class="tn-color-white">搜 索</text>
|
||||
</tn-button>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="tn-flex tn-flex-row-around tn-flex-center tn-flex-col-center" style="padding: 30rpx;">-->
|
||||
<!-- <view style="color: #E15033;">-->
|
||||
<!-- <text class="tn-icon-sequence-vertical" style="vertical-align: middle;"></text>-->
|
||||
<!-- <text style="margin-left: 15rpx;vertical-align: middle;">全部排序</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view style="height: 25rpx;width: 2rpx;background-color: #808080;"></view>-->
|
||||
<!-- <view>-->
|
||||
<!-- <text class="tn-icon-first" style="vertical-align: middle;"></text>-->
|
||||
<!-- <text style="margin-left: 15rpx;vertical-align: middle;">人气榜</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view style="height: 25rpx;width: 2rpx;background-color: #808080;"></view>-->
|
||||
<!-- <view>-->
|
||||
<!-- <text class="tn-icon-light" style="vertical-align: middle;"></text>-->
|
||||
<!-- <text style="margin-left: 15rpx;vertical-align: middle;">最新入驻</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
<!-- <view class="tn-flex tn-flex-row-between tn-flex-center tn-flex-col-center" style="padding: 30rpx;">-->
|
||||
<!-- <view style="text-align: center;background-color: #FFF;padding:10rpx 30rpx;width: 48%;border-radius: 5rpx;">-->
|
||||
<!-- <text>省协会</text>-->
|
||||
<!-- <text class="tn-icon-down-triangle"></text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view style="text-align: center;background-color: #FFF;padding:10rpx 30rpx;width: 48%;border-radius: 5rpx;">-->
|
||||
<!-- <text>市协会</text>-->
|
||||
<!-- <text class="tn-icon-down-triangle"></text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<view style="padding:30rpx 30rpx 180rpx 30rpx;">
|
||||
<view style="position: relative;" @click="tn('/pages/index/pizz_info?id='+item.id)">
|
||||
<view class="tn-flex tn-flex-center tn-flex-col-center"
|
||||
style="box-shadow: 0rpx 4rpx 25rpx 0rpx rgba(5,171,129,0.25);background: linear-gradient(to bottom,rgba(19,194,150,0.7) 0%, #13C296 100%);padding:40rpx 30rpx;border-radius: 30rpx;margin-bottom: 20rpx;">
|
||||
<view>
|
||||
<image :src="apiImgUrl+'/uploads/1/20240628/a78696e22b3cecbf678afbbcca617fca.png'"
|
||||
style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
|
||||
</view>
|
||||
<view style="margin-left: 30rpx;">
|
||||
<view style="color:#ffffff;font-size: 32rpx;font-weight: 600;">洛阳市总商会
|
||||
</view>
|
||||
<view style="font-size: 28rpx;color: rgba(255,255,255,0.6);margin-top: 15rpx;">成立时间：2021-10-01
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
style="font-size: 20rpx;color: #09AE85;background-color: #B8EDE0;position: absolute;top: 0;right: 0;border-radius: 0px 15rpx 0px 15rpx;padding:10rpx 15rpx;">
|
||||
<text style="vertical-align: middle;margin-left: 5rpx;">已认证</text>
|
||||
</view>
|
||||
<view class="triangle"></view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between"
|
||||
style="color: #CCCCCC;margin: 50rpx 0rpx 40rpx 0rpx;">
|
||||
<view style="border: 1rpx dashed #CCCCCC;width: 100%;"></view>
|
||||
<!-- <view style="width: 500rpx;text-align: center;font-size: 24rpx;">分协会展示</view> -->
|
||||
<view style="border: 1rpx dashed #CCCCCC;width: 100%;"></view>
|
||||
</view>
|
||||
<view v-for="(item,index) in list" style="position: relative;" @click="switchTabbar(item)">
|
||||
<view class="tn-flex tn-flex-center tn-flex-col-center"
|
||||
style="background-color: #ffffff;padding:40rpx 30rpx;border-radius: 30rpx;margin-bottom: 30rpx;">
|
||||
<view>
|
||||
<image :src="apiImgUrl+item.association_image"
|
||||
style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
|
||||
</view>
|
||||
<view style="margin-left: 30rpx;">
|
||||
<view style="font-size: 32rpx;font-weight: 600;">{{item.association_name}}
|
||||
</view>
|
||||
<view style="font-size: 28rpx;color: #888888;margin-top: 15rpx;">成立时间：{{item.createtime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
style="font-size: 20rpx;color: #09AE85;background-color: #B8EDE0;position: absolute;top: 0;right: 0;border-radius: 0px 15rpx 0px 15rpx;padding:10rpx 15rpx;">
|
||||
<text style="vertical-align: middle;margin-left: 5rpx;">已认证</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view style="position: fixed;bottom: 13%;width: 100%;">-->
|
||||
<!-- <view @click="tn('/pages/index/enter_in')"-->
|
||||
<!-- style="margin: 0 auto;color: #fff;letter-spacing: 10rpx;line-height: 70rpx;;text-align: center;width: 70%;height: 70rpx;background: linear-gradient(270deg, #EE7E45, #EE9657);border-radius: 50rpx;">-->
|
||||
<!-- 快速入驻</view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@ -182,7 +182,7 @@
|
||||
inactiveIcon: '/static/02.png'
|
||||
},
|
||||
{
|
||||
title: '发现',
|
||||
title: '青企圈',
|
||||
activeIcon: '/static/03_3.png',
|
||||
inactiveIcon: '/static/03.png'
|
||||
},
|
||||
|
||||
@ -38,8 +38,7 @@
|
||||
<view v-for="(item,index) in actList">
|
||||
<view @click="openUrl('/pages/packageB/event/event_info?id='+item.id)"
|
||||
style="margin-bottom: 30rpx;background-color: #FFF;border-radius: 20rpx;">
|
||||
<view class="tn-flex tn-flex-row-between" @click="openNewUrl(item)"
|
||||
style="padding:20rpx 20rpx 10rpx 10rpx;">
|
||||
<view class="tn-flex tn-flex-row-between" style="padding:20rpx 20rpx 10rpx 10rpx;">
|
||||
<view style="margin-left: 10rpx;" v-if="item.activity_image">
|
||||
<image :src="apiImgUrl+item.activity_image" mode="aspectFill"
|
||||
style="width: 280rpx;height: 180rpx;border-radius: 20rpx;"></image>
|
||||
@ -94,7 +93,7 @@
|
||||
inactiveIcon: '/static/02.png'
|
||||
},
|
||||
{
|
||||
title: '发现',
|
||||
title: '青企圈',
|
||||
activeIcon: '/static/03_3.png',
|
||||
inactiveIcon: '/static/03.png'
|
||||
},
|
||||
|
||||
@ -65,54 +65,30 @@
|
||||
</tn-nav-bar>
|
||||
<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
|
||||
<view style="padding: 30rpx;">
|
||||
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
|
||||
<view @click="tt_show_do">
|
||||
<view>{{header_id_name}}</view>
|
||||
<view @click="tt_show_do" class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
|
||||
<view>
|
||||
<view v-if="header_id_name == ''">请选择开票信息</view>
|
||||
<view v-if="header_id_name != ''">
|
||||
<view style="padding: 30rpx 0rpx;">
|
||||
<view>申请人：{{header_id_name.name}}</view>
|
||||
<view>公司名称：{{header_id_name.unit}}</view>
|
||||
<view>纳税人识别号：{{header_id_name.taxpayer_identification_number}}</view>
|
||||
<view>单位地址：{{header_id_name.unit_address}}</view>
|
||||
<view>单位电话：{{header_id_name.telephone}}</view>
|
||||
<view>银行基本户账号：{{header_id_name.bank_basic_account_number}}</view>
|
||||
<view>开户行：{{header_id_name.bank}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<tn-button @click="tt_add_show = true" backgroundColor="#3D7EFF" size="sm"
|
||||
fontColor="#ffffff">添加开票信息</tn-button>
|
||||
<!-- <tn-button @click="tt_add_show = true" backgroundColor="#3D7EFF" size="sm"
|
||||
fontColor="#ffffff">添加开票信息</tn-button> -->
|
||||
<text style="margin-left: 20rpx;" class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<tn-select v-model="tt_show" mode="single" :list="tt_list" @confirm="tt_confirm"></tn-select>
|
||||
<!-- <tn-select v-model="tt_show" mode="single" :list="tt_list" @confirm="tt_confirm"></tn-select> -->
|
||||
</view>
|
||||
<view v-if="tt_add_show" class="text" style="padding:20rpx 40rpx;">
|
||||
<view style="text-align: center;font-size: 32rpx;font-weight: 600;">添加开票信息</view>
|
||||
<tn-form ref="form" :labelWidth="120">
|
||||
<tn-form-item prop="name">
|
||||
<tn-input placeholder="申请人" :customStyle="{width: '600rpx'}" v-model="addForm.name" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="unit">
|
||||
<tn-input placeholder="公司名称" :customStyle="{width: '600rpx'}" v-model="addForm.unit" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="taxpayer_identification_number">
|
||||
<tn-input placeholder="纳税人识别号" :customStyle="{width: '600rpx'}"
|
||||
v-model="addForm.taxpayer_identification_number" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="unit_address">
|
||||
<tn-input placeholder="单位地址" :customStyle="{width: '600rpx'}"
|
||||
v-model="addForm.unit_address" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="telephone">
|
||||
<tn-input placeholder="单位电话" :customStyle="{width: '600rpx'}" v-model="addForm.telephone" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="bank_basic_account_number">
|
||||
<tn-input placeholder="银行基本户账号" :customStyle="{width: '600rpx'}"
|
||||
v-model="addForm.bank_basic_account_number" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="bank">
|
||||
<tn-input placeholder="开户行" :customStyle="{width: '600rpx'}" v-model="addForm.bank" />
|
||||
</tn-form-item>
|
||||
</tn-form>
|
||||
<view style="text-align: center;margin-top: 50rpx;">
|
||||
<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff"
|
||||
@click="tt_add_show = false" width="40%">取消</tn-button>
|
||||
<tn-button backgroundColor="#3D7EFF" height="70rpx" width="40%" fontColor="#ffffff"
|
||||
style="margin-left: 30rpx;" @click="tt_add_do">提交</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!tt_add_show" class="text" style="padding:20rpx 40rpx;">
|
||||
<view class="text" style="padding:20rpx 40rpx;">
|
||||
<view style="text-align: center;font-size: 32rpx;font-weight: 600;">申请发票</view>
|
||||
<tn-form ref="form" :labelWidth="180">
|
||||
<tn-form-item prop="name" label="发票类型">
|
||||
@ -211,6 +187,81 @@
|
||||
</view>
|
||||
</view>
|
||||
</tn-popup>
|
||||
<tn-popup v-model="tt_add_show" mode="right" :safeAreaInsetBottom="true" width="100%">
|
||||
<tn-nav-bar :isBack="false" backTitle="" :alpha="true" :bottomShadow="false">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view style="padding-left: 15rpx;" @click="tt_add_show = false">
|
||||
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
|
||||
</view>
|
||||
<view class="tn-margin-top"
|
||||
style="text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
|
||||
<tn-tabs :list="[{name:'选择开票信息'}]" activeColor="#000" :bold="false" :fontSize="34"></tn-tabs>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
|
||||
<view v-if="!tt_add_show_add" style="padding:0rpx 30rpx 150rpx 30rpx;">
|
||||
<view style="text-align:right;">
|
||||
<tn-button @click="tt_add_show_add = true" backgroundColor="#3D7EFF" size="sm"
|
||||
fontColor="#ffffff">添加开票信息</tn-button>
|
||||
</view>
|
||||
<tn-radio-group v-model="header_id" width="100%" wrap @change="radioGroupChange">
|
||||
<block v-for="(item,index) in tt_list">
|
||||
<tn-radio :name="item.id+''" :size="40" borderColor="#3D7EFF" activeColor="#3D7EFF">
|
||||
<view style="padding: 30rpx 0rpx;margin-left: 30px;">
|
||||
<view>申请人：{{item.name}}</view>
|
||||
<view>公司名称：{{item.unit}}</view>
|
||||
<view>纳税人识别号：{{item.taxpayer_identification_number}}</view>
|
||||
<view>单位地址：{{item.unit_address}}</view>
|
||||
<view>单位电话：{{item.telephone}}</view>
|
||||
<view>银行基本户账号：{{item.bank_basic_account_number}}</view>
|
||||
<view>开户行：{{item.bank}}</view>
|
||||
</view>
|
||||
</tn-radio>
|
||||
</block>
|
||||
</tn-radio-group>
|
||||
</view>
|
||||
<view style="position: fixed;bottom: 80rpx;width: 92%;margin: 0 auto;text-align: center;">
|
||||
<tn-button @click="tt_add_show = false" backgroundColor="#3D7EFF" width="300rpx" height="80rpx"
|
||||
fontColor="#ffffff">确定</tn-button>
|
||||
</view>
|
||||
<view v-if="tt_add_show_add" class="text" style="padding:20rpx 40rpx;">
|
||||
<view style="text-align: center;font-size: 32rpx;font-weight: 600;">添加开票信息</view>
|
||||
<tn-form ref="form" :labelWidth="120">
|
||||
<tn-form-item prop="name">
|
||||
<tn-input placeholder="申请人" :customStyle="{width: '600rpx'}" v-model="addForm.name" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="unit">
|
||||
<tn-input placeholder="公司名称" :customStyle="{width: '600rpx'}" v-model="addForm.unit" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="taxpayer_identification_number">
|
||||
<tn-input placeholder="纳税人识别号" :customStyle="{width: '600rpx'}"
|
||||
v-model="addForm.taxpayer_identification_number" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="unit_address">
|
||||
<tn-input placeholder="单位地址" :customStyle="{width: '600rpx'}"
|
||||
v-model="addForm.unit_address" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="telephone">
|
||||
<tn-input placeholder="单位电话" :customStyle="{width: '600rpx'}" v-model="addForm.telephone" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="bank_basic_account_number">
|
||||
<tn-input placeholder="银行基本户账号" :customStyle="{width: '600rpx'}"
|
||||
v-model="addForm.bank_basic_account_number" />
|
||||
</tn-form-item>
|
||||
<tn-form-item prop="bank">
|
||||
<tn-input placeholder="开户行" :customStyle="{width: '600rpx'}" v-model="addForm.bank" />
|
||||
</tn-form-item>
|
||||
</tn-form>
|
||||
<view style="text-align: center;margin-top: 50rpx;">
|
||||
<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff"
|
||||
@click="tt_add_show_add = false" width="40%">取消</tn-button>
|
||||
<tn-button backgroundColor="#3D7EFF" height="70rpx" width="40%" fontColor="#ffffff"
|
||||
style="margin-left: 30rpx;" @click="tt_add_do">提交</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -229,6 +280,7 @@
|
||||
apiImgUrl: this.$store.state.imgUrl,
|
||||
addMod: false,
|
||||
infoMod: false,
|
||||
tt_add_show_add: false,
|
||||
addForm: {
|
||||
name: '',
|
||||
taxpayer_identification_number: '',
|
||||
@ -250,8 +302,8 @@
|
||||
id: 2
|
||||
}
|
||||
],
|
||||
header_id: 0,
|
||||
header_id_name: '请选择开票信息',
|
||||
header_id: -1,
|
||||
header_id_name: '',
|
||||
invoice_type_name: '普票',
|
||||
invoice_type: 1,
|
||||
tt_add_show: false,
|
||||
@ -276,6 +328,11 @@
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
radioGroupChange(d) {
|
||||
const item = this.tt_list.find(item => item.id == d);
|
||||
console.log(item);
|
||||
this.header_id_name = item;
|
||||
},
|
||||
openImg() {
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
@ -304,16 +361,17 @@
|
||||
this.invoice_type = this.actionSheetList[index].id;
|
||||
},
|
||||
tt_show_do() {
|
||||
if (this.tt_list.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先添加开票信息',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
this.tt_add_show = true;
|
||||
} else {
|
||||
this.tt_show = true;
|
||||
}
|
||||
this.tt_add_show = true;
|
||||
// if (this.tt_list.length == 0) {
|
||||
// uni.showToast({
|
||||
// title: '请先添加开票信息',
|
||||
// icon: 'none',
|
||||
// duration: 2000
|
||||
// });
|
||||
// this.tt_add_show = true;
|
||||
// } else {
|
||||
// this.tt_show = true;
|
||||
// }
|
||||
|
||||
},
|
||||
kp_add_do() {
|
||||
@ -353,6 +411,9 @@
|
||||
this.invoice_type_name = '普票';
|
||||
this.invoice_type = 1;
|
||||
this.money = '';
|
||||
this.allList = [];
|
||||
this.page = 1;
|
||||
this.getList();
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
@ -400,12 +461,12 @@
|
||||
if (res.data == null) {
|
||||
this.tt_list = [];
|
||||
} else {
|
||||
var key = res.data;
|
||||
const transformedSelectList = key.map(item => ({
|
||||
value: item.id,
|
||||
label: item.unit
|
||||
}));
|
||||
this.tt_list = transformedSelectList;
|
||||
// var key = res.data;
|
||||
// const transformedSelectList = key.map(item => ({
|
||||
// value: item.id,
|
||||
// label: item.unit
|
||||
// }));
|
||||
this.tt_list = res.data;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@ -424,7 +485,7 @@
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
this.allList.push(...res.data.data);
|
||||
this.count = res.data.total;
|
||||
this.count = res.data.count;
|
||||
})
|
||||
.catch(error => {
|
||||
uni.showToast({
|
||||
|
||||
@ -1,22 +1,75 @@
|
||||
<template>
|
||||
<view style="letter-spacing: 1rpx;" v-cloak>
|
||||
<view style="background: #F1F2F8;" v-cloak>
|
||||
<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-between">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view style="padding-left: 15rpx;" @click="goBack()">
|
||||
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
|
||||
</view>
|
||||
<view class="tn-margin-top"
|
||||
style="text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
|
||||
<tn-tabs :list="[{name:'活动详情'}]" :current="topCurrent" activeColor="#000" :bold="false"
|
||||
:fontSize="36"></tn-tabs>
|
||||
</view>
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view style="padding-left: 15rpx;" @click="goBack()">
|
||||
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
|
||||
</view>
|
||||
<view style="width: 83%;font-weight: bold;">
|
||||
<text>活动详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<image :src="apiImgUrl+info.activity_image" style="width: 100%;" mode="widthFix"></image>
|
||||
<view>
|
||||
<view style="padding: 30rpx;">
|
||||
<image :src="apiImgUrl+info.activity_image"
|
||||
style="display: block;width: 100%;border-radius: 20rpx 20rpx 0rpx 0rpx;" mode="widthFix"></image>
|
||||
<view style="background-color: #ffffff;border-radius: 0rpx 0rpx 20rpx 20rpx;padding: 30rpx;">
|
||||
<view style="font-size: 34rpx;font-weight: bold;">{{ info.activity_name }}</view>
|
||||
<view style="font-size: 28rpx;color: #666666;margin-top: 20rpx;">
|
||||
<text class="tn-icon-time"></text>
|
||||
<text>{{formatTime(info.activity_end_time)}}-{{formatTime(info.activity_start_time)}}</text>
|
||||
</view>
|
||||
<view style="font-size: 28rpx;color: #666666;margin-top: 20rpx;">
|
||||
<text class="tn-icon-location" style="vertical-align: middle;"></text>
|
||||
<text>{{ info.activity_location }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="margin-top: 20rpx;background-color: #ffffff;border-radius: 20rpx;padding: 30rpx;">
|
||||
<view style="font-size: 34rpx;font-weight: 600;padding: 20rpx 0rpx;">活动介绍</view>
|
||||
<view>
|
||||
<view class="ks_html" style="line-height: 50rpx;margin-top:20rpx">
|
||||
<view v-if="info.video!=null&&info.video!=''">
|
||||
<video :src="apiImgUrl+info.video" style="width: 100%;border-radius: 5rpx;"></video>
|
||||
</view>
|
||||
<view v-html="info.activity_content"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 80rpx;"></view>
|
||||
<view
|
||||
style="border-radius: 200rpx;background: #FFFFFF;position: fixed;bottom: 50rpx;right: 30rpx;padding: 30rpx 50rpx;box-shadow: 0rpx 4rpx 25rpx 0rpx rgba(48,86,211,0.15);">
|
||||
<view style="text-align: center;" class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
|
||||
<view>
|
||||
<button hover-class="none" open-type="share">
|
||||
<view style="font-size: 42rpx;">
|
||||
<text class="tn-icon-send"></text>
|
||||
</view>
|
||||
<view style="color: #666666;">
|
||||
分享
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
<view style="margin: 0px 40rpx;">
|
||||
<view style="font-size: 42rpx;">
|
||||
<text class="tn-icon-praise"></text>
|
||||
</view>
|
||||
<view style="color: #666666;">
|
||||
点赞
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view style="font-size: 42rpx;">
|
||||
<text class="tn-icon-star"></text>
|
||||
</view>
|
||||
<view style="color: #666666;">
|
||||
收藏
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view>
|
||||
<view style="padding:20rpx 30rpx;">
|
||||
<view style="font-size: 34rpx;font-weight: 600;">{{ info.activity_name }}</view>
|
||||
<view style="margin-top: 40rpx;">
|
||||
@ -148,18 +201,18 @@
|
||||
</tn-form>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view style="position: fixed;bottom: 30rpx; width: 100%;">
|
||||
<!-- <view class="tn-flex tn-flex-center tn-flex-row-center tn-flex-col-center"-->
|
||||
<!-- style="background-color: #FDF2EC;text-align: center;padding: 30rpx;">-->
|
||||
<!-- <view style="font-weight: 600;">-->
|
||||
<!-- <text style="margin-right: 10rpx;">距报名结束剩<text style="color: #F73909;">119</text>天</text>-->
|
||||
<!-- <tn-count-down fontColor="#F73909" backgroundColor="#FDF2EC" :fontSize="30" :timestamp="86400"-->
|
||||
<!-- :showDays="true" :showHours="true" :showSeconds="true" :showMinutes="true"></tn-count-down>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<view style="text-align: center;padding:0 30rpx;" v-if="info.activity_type==1">
|
||||
<!-- <view style="position: fixed;bottom: 30rpx; width: 100%;"> -->
|
||||
<!-- <view class="tn-flex tn-flex-center tn-flex-row-center tn-flex-col-center"-->
|
||||
<!-- style="background-color: #FDF2EC;text-align: center;padding: 30rpx;">-->
|
||||
<!-- <view style="font-weight: 600;">-->
|
||||
<!-- <text style="margin-right: 10rpx;">距报名结束剩<text style="color: #F73909;">119</text>天</text>-->
|
||||
<!-- <tn-count-down fontColor="#F73909" backgroundColor="#FDF2EC" :fontSize="30" :timestamp="86400"-->
|
||||
<!-- :showDays="true" :showHours="true" :showSeconds="true" :showMinutes="true"></tn-count-down>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view style="text-align: center;padding:0 30rpx;" v-if="info.activity_type==1">
|
||||
<button class="mmy" hover-class="none" @click="application_add" v-if="info.type=='进行中'">确认报名</button>
|
||||
<button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='已结束'">报名已结束</button>
|
||||
<button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='未开始'">报名未开始</button>
|
||||
@ -178,8 +231,8 @@
|
||||
<button class="mmy" hover-class="none" @click="peiMod=true" v-if="info.type=='进行中'">我要参加</button>
|
||||
<button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='已结束'">报名已结束</button>
|
||||
<button class="mmy" hover-class="none" :disabled="true" v-if="info.type=='未开始'">报名未开始</button>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- </view> -->
|
||||
<tn-modal v-model="juanMod" :custom="true">
|
||||
<view style="padding: 20rpx;text-align: center;font-size: 40rpx;">感谢您的捐助</view>
|
||||
<tn-form :labelWidth="180">
|
||||
@ -592,6 +645,9 @@
|
||||
url: url
|
||||
})
|
||||
},
|
||||
formatTime(time) {
|
||||
return time.split(" ")[0];
|
||||
},
|
||||
goBack() {
|
||||
if (getCurrentPages().length > 1) {
|
||||
uni.navigateBack()
|
||||
@ -616,4 +672,27 @@
|
||||
line-height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 1.35;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
166
pages/packageB/news/new_list.vue
Normal file
166
pages/packageB/news/new_list.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view style="background: #F1F2F8;" v-cloak>
|
||||
<tn-nav-bar :isBack="false" :bottomShadow="false" backTitle="" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view style="padding-left: 15rpx;" @click="goBack()">
|
||||
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
|
||||
</view>
|
||||
<view style="width: 83%;font-weight: bold;">
|
||||
<text>新闻详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view style="padding-top: 20rpx;background-color: #ffffff;">
|
||||
<tn-tabs :list="goryList" :isScroll="true" :activeItemStyle="{fontSize:'30rpx',fontWeight:'600'}"
|
||||
activeColor="#3056D3" :current="current" name="name" @change="change" :fontSize="28"></tn-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding:30rpx;padding-bottom: 20rpx;min-height:87vh;">
|
||||
<view style="background-color: #ffffff;border-radius:20rpx;">
|
||||
<view v-for="(item,index) in news_list" :class="{'rounded_corner': index === 0}">
|
||||
<view class="tn-flex tn-flex-row-between" @click="openNewUrl(item)"
|
||||
style="padding: 20rpx;min-height: 200rpx;">
|
||||
<view style="margin-left: 20rpx;" v-if="item.news_image">
|
||||
<image :src="apiImgUrl+item.news_image" mode="aspectFill"
|
||||
style="width: 280rpx;height: 180rpx;border-radius: 20rpx;"></image>
|
||||
</view>
|
||||
<view style="position:relative;padding:0rpx 10rpx 10rpx 15rpx">
|
||||
<view class="tn-text-ellipsis-2" style="font-size: 32rpx;font-weight: bold;">
|
||||
{{ item.news_title }}
|
||||
</view>
|
||||
<view style="color: #3056D3;font-size: 26rpx;margin: 20rpx 0rpx;">#{{ item.name }}</view>
|
||||
<view class="tn-flex tn-flex-row-between" style="font-size:26rpx;color: #888888;">
|
||||
<view>{{ formatTime(item.showtime) }}</view>
|
||||
<view>
|
||||
<text class="tn-icon-eye-fill" style="vertical-align: middle;"></text>
|
||||
<text style="vertical-align: middle;margin-left: 5rpx;">{{ item.news_hits }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="news_list.length-1>index"
|
||||
style="background: rgba(217, 217, 217, 0.5);width: 90%;margin: 0 auto;height: 2rpx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
newsGoryList,
|
||||
newsList,
|
||||
} from '@/util/api.js';
|
||||
import store from '@/store/index.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
goryList: [],
|
||||
news_list: [],
|
||||
page: 1,
|
||||
size: 10,
|
||||
apiImgUrl: this.$store.state.imgUrl,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getNewsGoryList();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page += 1;
|
||||
this.getNewsList();
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e;
|
||||
var info = this.goryList[e];
|
||||
this.gory_id = info.id;
|
||||
this.type = e === 0 ? 1 : 0;
|
||||
this.page = 1;
|
||||
this.news_list = [];
|
||||
this.getNewsList();
|
||||
},
|
||||
getNewsList() {
|
||||
newsList({
|
||||
association_id: store.state.Gid,
|
||||
type: this.type,
|
||||
gory_id: this.gory_id,
|
||||
page: this.page,
|
||||
size: this.size
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
if (res.code == 1) {
|
||||
this.news_list.push(...res.data.ret);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
})
|
||||
},
|
||||
getNewsGoryList() {
|
||||
newsGoryList({
|
||||
association_id: this.association_id
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
if (res.code == 1) {
|
||||
var key = res.data;
|
||||
// key.unshift({
|
||||
// id: 0,
|
||||
// name: '最新'
|
||||
// });
|
||||
this.goryList = key;
|
||||
this.type = 0;
|
||||
this.gory_id = key[0].id;
|
||||
this.getNewsList();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
})
|
||||
},
|
||||
openNewUrl(item) {
|
||||
//'/pages/packageB/news/new_info?id='+item.news_id
|
||||
console.log(item);
|
||||
if (item.wx_url == '') {
|
||||
uni.navigateTo({
|
||||
url: '/pages/packageB/news/new_info?id=' + item.news_id
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/web?url=' + encodeURIComponent(item.wx_url),
|
||||
})
|
||||
}
|
||||
},
|
||||
goBack() {
|
||||
if (getCurrentPages().length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
formatTime(time) {
|
||||
const [year, month, day] = time.split(' ')[0].split('-');
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,492 +1,463 @@
|
||||
<template>
|
||||
<view
|
||||
v-if="visibleSync"
|
||||
class="tn-popup-class tn-popup"
|
||||
:style="[customStyle, popupStyle, { zIndex: elZIndex - 1}]"
|
||||
hover-stop-propagation
|
||||
>
|
||||
<!-- mask -->
|
||||
<view
|
||||
class="tn-popup__mask"
|
||||
:class="[{'tn-popup__mask--show': showPopup && mask}]"
|
||||
:style="{zIndex: elZIndex - 2}"
|
||||
@tap="maskClick"
|
||||
@touchmove.stop.prevent = "() => {}"
|
||||
hover-stop-propagation
|
||||
></view>
|
||||
<!-- 弹框内容 -->
|
||||
<view
|
||||
class="tn-popup__content"
|
||||
:class="[
|
||||
<view v-if="visibleSync" class="tn-popup-class tn-popup" :style="[customStyle, popupStyle, { zIndex: elZIndex - 1}]"
|
||||
hover-stop-propagation>
|
||||
<!-- mask -->
|
||||
<view class="tn-popup__mask" :class="[{'tn-popup__mask--show': showPopup && mask}]"
|
||||
:style="{zIndex: elZIndex - 2}" @tap="maskClick" @touchmove.stop.prevent="() => {}" hover-stop-propagation>
|
||||
</view>
|
||||
<!-- 弹框内容 -->
|
||||
<view class="tn-popup__content" :class="[
|
||||
mode !== 'center' ? backgroundColorClass : '',
|
||||
safeAreaInsetBottom ? 'tn-safe-area-inset-bottom' : '',
|
||||
'tn-popup--' + mode,
|
||||
showPopup ? 'tn-popup__content--visible' : '',
|
||||
zoom && mode === 'center' ? 'tn-popup__content__center--animation-zoom' : ''
|
||||
]"
|
||||
:style="[contentStyle]"
|
||||
@tap="modeCenterClose"
|
||||
@touchmove.stop.prevent
|
||||
@tap.stop.prevent
|
||||
>
|
||||
<!-- 居中时候的内容 -->
|
||||
<view
|
||||
v-if="mode === 'center'"
|
||||
class="tn-popup__content__center_box"
|
||||
:class="[backgroundColorClass]"
|
||||
:style="[centerStyle]"
|
||||
@touchmove.stop.prevent
|
||||
@tap.stop.prevent
|
||||
>
|
||||
<!-- 关闭按钮 -->
|
||||
<view
|
||||
v-if="closeBtn"
|
||||
class="tn-popup__close"
|
||||
:class="[`tn-icon-${closeBtnIcon}`, `tn-popup__close--${closeBtnPosition}`]"
|
||||
:style="[closeBtnStyle, {zIndex: elZIndex}]"
|
||||
@tap="close"
|
||||
></view>
|
||||
<scroll-view scroll-y class="tn-popup__content__scroll-view">
|
||||
<slot></slot>
|
||||
</scroll-view>
|
||||
</view>
|
||||
]" :style="[contentStyle]" @tap="modeCenterClose" @touchmove.stop.prevent @tap.stop.prevent>
|
||||
<!-- 居中时候的内容 -->
|
||||
<view v-if="mode === 'center'" class="tn-popup__content__center_box" :class="[backgroundColorClass]"
|
||||
:style="[centerStyle]" @touchmove.stop.prevent @tap.stop.prevent>
|
||||
<!-- 关闭按钮 -->
|
||||
<view v-if="closeBtn" class="tn-popup__close"
|
||||
:class="[`tn-icon-${closeBtnIcon}`, `tn-popup__close--${closeBtnPosition}`]"
|
||||
:style="[closeBtnStyle, {zIndex: elZIndex}]" @tap="close"></view>
|
||||
<scroll-view scroll-y class="tn-popup__content__scroll-view">
|
||||
<slot></slot>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 除居中外的其他情况 -->
|
||||
<scroll-view scroll-y v-else class="tn-popup__content__scroll-view">
|
||||
<slot></slot>
|
||||
</scroll-view>
|
||||
<!-- 关闭按钮 -->
|
||||
<view
|
||||
v-if="mode !== 'center' && closeBtn"
|
||||
class="tn-popup__close"
|
||||
:class="[`tn-popup__close--${closeBtnPosition}`]"
|
||||
:style="{zIndex: elZIndex}"
|
||||
@tap="close"
|
||||
>
|
||||
<view :class="[`tn-icon-${closeBtnIcon}`]" :style="[closeBtnStyle]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 除居中外的其他情况 -->
|
||||
<scroll-view scroll-y v-else class="tn-popup__content__scroll-view">
|
||||
<slot></slot>
|
||||
</scroll-view>
|
||||
<!-- 关闭按钮 -->
|
||||
<view v-if="mode !== 'center' && closeBtn" class="tn-popup__close"
|
||||
:class="[`tn-popup__close--${closeBtnPosition}`]" :style="{zIndex: elZIndex}" @tap="close">
|
||||
<view :class="[`tn-icon-${closeBtnIcon}`]" :style="[closeBtnStyle]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||||
export default {
|
||||
mixins: [componentsColorMixin],
|
||||
name: 'tn-popup',
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 弹出方向
|
||||
// left/right/top/bottom/center
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 是否显示遮罩
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 抽屉的宽度（mode=left/right）,高度（mode=top/bottom）
|
||||
length: {
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
},
|
||||
// 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
|
||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
|
||||
width: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
|
||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
|
||||
height: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否开启动画，只在mode=center有效
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否可以通过点击遮罩进行关闭
|
||||
maskCloseable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 用户自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 显示圆角的大小
|
||||
borderRadius: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// zIndex
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否显示关闭按钮
|
||||
closeBtn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 关闭按钮的图标
|
||||
closeBtnIcon: {
|
||||
type: String,
|
||||
default: 'close'
|
||||
},
|
||||
// 关闭按钮显示的位置
|
||||
// top-left/top-right/bottom-left/bottom-right
|
||||
closeBtnPosition: {
|
||||
type: String,
|
||||
default: 'top-right'
|
||||
},
|
||||
// 关闭按钮图标颜色
|
||||
closeIconColor: {
|
||||
type: String,
|
||||
default: '#AAAAAA'
|
||||
},
|
||||
// 关闭按钮图标的大小
|
||||
closeIconSize: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
|
||||
negativeTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// marginTop，在mode = top,left,right时生效，避免用户使用了自定义导航栏，组件把导航栏遮挡了
|
||||
marginTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
|
||||
// 对v-model双向绑定多层调用造成报错不能修改props值的问题
|
||||
popup: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 处理使用了自定义导航栏时被遮挡的问题
|
||||
popupStyle() {
|
||||
let style = {}
|
||||
if ((this.mode === 'top' || this.mode === 'left' || this.mode === 'right') && this.marginTop) {
|
||||
style.marginTop = this.$tn.string.getLengthUnitValue(this.marginTop, 'px')
|
||||
}
|
||||
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||||
export default {
|
||||
mixins: [componentsColorMixin],
|
||||
name: 'tn-popup',
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 弹出方向
|
||||
// left/right/top/bottom/center
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 是否显示遮罩
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 抽屉的宽度（mode=left/right）,高度（mode=top/bottom）
|
||||
length: {
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
},
|
||||
// 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
|
||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
|
||||
width: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
|
||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
|
||||
height: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否开启动画，只在mode=center有效
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否可以通过点击遮罩进行关闭
|
||||
maskCloseable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 用户自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 显示圆角的大小
|
||||
borderRadius: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// zIndex
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否显示关闭按钮
|
||||
closeBtn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 关闭按钮的图标
|
||||
closeBtnIcon: {
|
||||
type: String,
|
||||
default: 'close'
|
||||
},
|
||||
// 关闭按钮显示的位置
|
||||
// top-left/top-right/bottom-left/bottom-right
|
||||
closeBtnPosition: {
|
||||
type: String,
|
||||
default: 'top-right'
|
||||
},
|
||||
// 关闭按钮图标颜色
|
||||
closeIconColor: {
|
||||
type: String,
|
||||
default: '#AAAAAA'
|
||||
},
|
||||
// 关闭按钮图标的大小
|
||||
closeIconSize: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
|
||||
negativeTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// marginTop，在mode = top,left,right时生效，避免用户使用了自定义导航栏，组件把导航栏遮挡了
|
||||
marginTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
|
||||
// 对v-model双向绑定多层调用造成报错不能修改props值的问题
|
||||
popup: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 处理使用了自定义导航栏时被遮挡的问题
|
||||
popupStyle() {
|
||||
let style = {}
|
||||
if ((this.mode === 'top' || this.mode === 'left' || this.mode === 'right') && this.marginTop) {
|
||||
style.marginTop = this.$tn.string.getLengthUnitValue(this.marginTop, 'px')
|
||||
}
|
||||
|
||||
return style
|
||||
},
|
||||
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
|
||||
contentStyle() {
|
||||
let style = {}
|
||||
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
|
||||
if (this.mode === 'left' || this.mode === 'right') {
|
||||
style = {
|
||||
width: this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length),
|
||||
height: '100%',
|
||||
transform: `translate3D(${this.mode === 'left' ? '-100%' : '100%'}, 0px, 0px)`
|
||||
}
|
||||
} else if (this.mode === 'top' || this.mode === 'bottom') {
|
||||
style = {
|
||||
width: '100%',
|
||||
height: this.height ? this.$tn.string.getLengthUnitValue(this.height) : this.$tn.string.getLengthUnitValue(this.length),
|
||||
transform: `translate3D(0px, ${this.mode === 'top' ? '-100%': '100%'}, 0px)`
|
||||
}
|
||||
}
|
||||
style.zIndex = this.elZIndex
|
||||
// 如果设置了圆角的值，添加弹窗的圆角
|
||||
if (this.borderRadius) {
|
||||
switch(this.mode) {
|
||||
case 'left':
|
||||
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`
|
||||
break
|
||||
case 'top':
|
||||
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`
|
||||
break
|
||||
case 'right':
|
||||
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`
|
||||
break
|
||||
case 'bottom':
|
||||
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`
|
||||
break
|
||||
}
|
||||
style.overflow = 'hidden'
|
||||
}
|
||||
return style
|
||||
},
|
||||
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
|
||||
contentStyle() {
|
||||
let style = {}
|
||||
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
|
||||
if (this.mode === 'left' || this.mode === 'right') {
|
||||
style = {
|
||||
width: this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string
|
||||
.getLengthUnitValue(this.length),
|
||||
height: '100%',
|
||||
transform: `translate3D(${this.mode === 'left' ? '-100%' : '100%'}, 0px, 0px)`
|
||||
}
|
||||
} else if (this.mode === 'top' || this.mode === 'bottom') {
|
||||
style = {
|
||||
width: '100%',
|
||||
height: this.height ? this.$tn.string.getLengthUnitValue(this.height) : this.$tn.string
|
||||
.getLengthUnitValue(this.length),
|
||||
transform: `translate3D(0px, ${this.mode === 'top' ? '-100%': '100%'}, 0px)`
|
||||
}
|
||||
}
|
||||
style.zIndex = this.elZIndex
|
||||
// 如果设置了圆角的值，添加弹窗的圆角
|
||||
if (this.borderRadius) {
|
||||
switch (this.mode) {
|
||||
case 'left':
|
||||
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`
|
||||
break
|
||||
case 'top':
|
||||
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`
|
||||
break
|
||||
case 'right':
|
||||
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`
|
||||
break
|
||||
case 'bottom':
|
||||
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`
|
||||
break
|
||||
}
|
||||
style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
if (this.backgroundColorStyle && this.mode !== 'center') {
|
||||
style.backgroundColor = this.backgroundColorStyle
|
||||
}
|
||||
if (this.backgroundColorStyle && this.mode !== 'center') {
|
||||
style.backgroundColor = this.backgroundColorStyle
|
||||
}
|
||||
|
||||
return style
|
||||
},
|
||||
// 中部弹窗的样式
|
||||
centerStyle() {
|
||||
let style = {}
|
||||
style.width = this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length)
|
||||
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开
|
||||
style.height = this.height ? this.$tn.string.getLengthUnitValue(this.height) : 'auto'
|
||||
style.zIndex = this.elZIndex
|
||||
if (this.negativeTop) {
|
||||
style.marginTop = `-${this.$tn.string.getLengthUnitValue(this.negativeTop)}`
|
||||
}
|
||||
if (this.borderRadius) {
|
||||
style.borderRadius = `${this.borderRadius}rpx`
|
||||
style.overflow='hidden'
|
||||
}
|
||||
if (this.backgroundColorStyle) {
|
||||
style.backgroundColor = this.backgroundColorStyle
|
||||
}
|
||||
return style
|
||||
},
|
||||
// 关闭按钮样式
|
||||
closeBtnStyle() {
|
||||
let style = {}
|
||||
if (this.closeIconColor) {
|
||||
style.color = this.closeIconColor
|
||||
}
|
||||
if (this.closeIconSize) {
|
||||
style.fontSize = this.closeIconSize + 'rpx'
|
||||
}
|
||||
return style
|
||||
},
|
||||
// 中部弹窗的样式
|
||||
centerStyle() {
|
||||
let style = {}
|
||||
style.width = this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string
|
||||
.getLengthUnitValue(this.length)
|
||||
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开
|
||||
style.height = this.height ? this.$tn.string.getLengthUnitValue(this.height) : 'auto'
|
||||
style.zIndex = this.elZIndex
|
||||
if (this.negativeTop) {
|
||||
style.marginTop = `-${this.$tn.string.getLengthUnitValue(this.negativeTop)}`
|
||||
}
|
||||
if (this.borderRadius) {
|
||||
style.borderRadius = `${this.borderRadius}rpx`
|
||||
style.overflow = 'hidden'
|
||||
}
|
||||
if (this.backgroundColorStyle) {
|
||||
style.backgroundColor = this.backgroundColorStyle
|
||||
}
|
||||
return style
|
||||
},
|
||||
// 关闭按钮样式
|
||||
closeBtnStyle() {
|
||||
let style = {}
|
||||
if (this.closeIconColor) {
|
||||
style.color = this.closeIconColor
|
||||
}
|
||||
if (this.closeIconSize) {
|
||||
style.fontSize = this.closeIconSize + 'rpx'
|
||||
}
|
||||
|
||||
return style
|
||||
},
|
||||
elZIndex() {
|
||||
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
visibleSync: false,
|
||||
showPopup: false,
|
||||
closeFromInner: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val) {
|
||||
// console.log(this.visibleSync);
|
||||
if (this.visibleSync) {
|
||||
this.visibleSync = false
|
||||
return
|
||||
}
|
||||
this.open()
|
||||
} else if (!this.closeFromInner) {
|
||||
this.close()
|
||||
}
|
||||
this.closeFromInner = false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 组件渲染完成时，检查value是否为true，如果是，弹出popup
|
||||
this.value && this.open()
|
||||
},
|
||||
methods: {
|
||||
// 点击遮罩
|
||||
maskClick() {
|
||||
if (!this.maskCloseable) return
|
||||
this.close()
|
||||
},
|
||||
open() {
|
||||
this.change('visibleSync', 'showPopup', true)
|
||||
},
|
||||
// 关闭弹框
|
||||
close() {
|
||||
// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
|
||||
// 造成@close事件触发两次
|
||||
this.closeFromInner = true
|
||||
this.change('showPopup', 'visibleSync', false)
|
||||
},
|
||||
// 中部弹出时，需要.tn-drawer-content将内容居中，此元素会铺满屏幕，点击需要关闭弹窗
|
||||
// 让其只在mode=center时起作用
|
||||
modeCenterClose() {
|
||||
if (this.mode != 'center' || !this.maskCloseable) return
|
||||
this.close()
|
||||
},
|
||||
// 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
|
||||
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
|
||||
change(param1, param2, status) {
|
||||
// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
|
||||
if (this.popup === true) {
|
||||
this.$emit('input', status)
|
||||
}
|
||||
this[param1] = status
|
||||
if (status) {
|
||||
// #ifdef H5 || MP
|
||||
this.timer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
clearTimeout(this.timer)
|
||||
}, 10)
|
||||
// #endif
|
||||
// #ifndef H5 || MP
|
||||
this.$nextTick(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
})
|
||||
// #endif
|
||||
} else {
|
||||
this.timer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
clearTimeout(this.timer)
|
||||
}, 250)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
elZIndex() {
|
||||
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
visibleSync: false,
|
||||
showPopup: false,
|
||||
closeFromInner: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val) {
|
||||
// console.log(this.visibleSync);
|
||||
if (this.visibleSync) {
|
||||
this.visibleSync = false
|
||||
return
|
||||
}
|
||||
this.open()
|
||||
} else if (!this.closeFromInner) {
|
||||
this.close()
|
||||
}
|
||||
this.closeFromInner = false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 组件渲染完成时，检查value是否为true，如果是，弹出popup
|
||||
this.value && this.open()
|
||||
},
|
||||
methods: {
|
||||
// 点击遮罩
|
||||
maskClick() {
|
||||
if (!this.maskCloseable) return
|
||||
this.close()
|
||||
},
|
||||
open() {
|
||||
this.change('visibleSync', 'showPopup', true)
|
||||
},
|
||||
// 关闭弹框
|
||||
close() {
|
||||
// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
|
||||
// 造成@close事件触发两次
|
||||
this.closeFromInner = true
|
||||
this.change('showPopup', 'visibleSync', false)
|
||||
},
|
||||
// 中部弹出时，需要.tn-drawer-content将内容居中，此元素会铺满屏幕，点击需要关闭弹窗
|
||||
// 让其只在mode=center时起作用
|
||||
modeCenterClose() {
|
||||
if (this.mode != 'center' || !this.maskCloseable) return
|
||||
this.close()
|
||||
},
|
||||
// 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
|
||||
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
|
||||
change(param1, param2, status) {
|
||||
// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
|
||||
if (this.popup === true) {
|
||||
this.$emit('input', status)
|
||||
}
|
||||
this[param1] = status
|
||||
if (status) {
|
||||
// #ifdef H5 || MP
|
||||
this.timer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
clearTimeout(this.timer)
|
||||
}, 10)
|
||||
// #endif
|
||||
// #ifndef H5 || MP
|
||||
this.$nextTick(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
})
|
||||
// #endif
|
||||
} else {
|
||||
this.timer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
clearTimeout(this.timer)
|
||||
}, 250)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tn-popup {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 29091 !important;
|
||||
|
||||
.tn-popup {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 29091 !important;
|
||||
&__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
transition: all 0.25s linear;
|
||||
|
||||
&__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
transition: all 0.25s linear;
|
||||
&--visible {
|
||||
transform: translate3D(0px, 0px, 0px) !important;
|
||||
|
||||
&--visible {
|
||||
transform: translate3D(0px, 0px, 0px) !important;
|
||||
&.tn-popup--center {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.tn-popup--center {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__center_box {
|
||||
min-width: 100rpx;
|
||||
min-height: 100rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
&__center_box {
|
||||
min-width: 100rpx;
|
||||
min-height: 100rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
&__scroll-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&__scroll-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__center--animation-zoom {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
&__center--animation-zoom {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
&__scroll_view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&__scroll_view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&--left {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
&--left {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
&--right {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
&--right {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
&--top {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
&--top {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
&--bottom {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
&--center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
}
|
||||
&--center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
&__close {
|
||||
position: absolute;
|
||||
|
||||
&--top-left {
|
||||
top: 30rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
&--top-left {
|
||||
top: 30rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
&--top-right {
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
&--top-right {
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
&--bottom-left {
|
||||
bottom: 30rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
&--bottom-left {
|
||||
bottom: 30rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
&--bottom-right {
|
||||
bottom: 30rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
}
|
||||
&--bottom-right {
|
||||
bottom: 30rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
background-color: $tn-mask-bg-color;
|
||||
transition: 0.25s linear;
|
||||
transition-property: opacity;
|
||||
opacity: 0;
|
||||
&__mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
background-color: $tn-mask-bg-color;
|
||||
transition: 0.25s linear;
|
||||
transition-property: opacity;
|
||||
opacity: 0;
|
||||
|
||||
&--show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user