作者 mxd

校长信箱

<template>
<view class="twoMailbox">
<!-- 校长信箱 -->
<view class="header-wrap">
<view class="tabs-wrap area flex">
<view :class="current==index?'tabs-active':''" v-for="(item,index) in tabs" :key="index"
<view class="tabs-wrap flex">
<view class="tabs-item" :class="current==index?'tabs-active':''" v-for="(item,index) in tabs" :key="index"
@tap="tabsClick(item,index)">
{{item}}
</view>
</view>
</view>
<!-- 校长私信 -->
<template v-if="current==0">
<view class="wrap area">
<view class="textarea-wrap area">
<view class="icon">
<image src="/static/imagesV2/study/icon-edit.png"></image>
</view>
<textarea
placeholder-style="font-size: 30rpx;font-family: PingFang SC;font-weight: 400;color: #B2B5BB;"
placeholder="请输入你要发送的内容" v-model="message" maxlength="-1" />
... ... @@ -169,29 +170,35 @@
}
.tabs-wrap {
height: 76rpx;
height: 88rpx;
justify-content: space-around;
align-items: center;
font-size: 32rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
color: #323232;
background-color: #fff;
border-top:1rpx solid #f3f4f6;
.tabs-item {
height: 100%;
display: flex;
align-items: center;
}
.tabs-active {
color: #FFFFFF;
color: #2D81FF;
position: relative;
}
.tabs-active::after {
content: '';
width: 38rpx;
height: 6rpx;
background: #FFFFFF;
border-radius: 4rpx;
position: absolute;
bottom: -18rpx;
left: 50%;
bottom: 0rpx;
transform: translate(-50%, 0);
background-image: url(@/static/imagesV2/icon23.png);
background-size: 100% 100%;
height: 24rpx;
width: 24rpx;
}
}
... ... @@ -207,7 +214,13 @@
background: #FFFFFF;
border-radius: 10rpx;
padding: 16rpx 20rpx;
display: flex;
.icon {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
margin-top: 5rpx;
}
textarea {
width: 100%;
height: 100%;
... ... @@ -221,7 +234,7 @@
line-height: 90rpx;
text-align: center;
background: #2D81FF;
border-radius: 10rpx;
border-radius: 44rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -233,7 +246,6 @@
// 微信添加
.wx-wrap {
height: 392rpx;
background: #FFFFFF;
border-radius: 10rpx;
flex-direction: column;
justify-content: center;
... ... @@ -246,15 +258,21 @@
.code-img{
width: 240rpx;
height: 240rpx;
border: 4rpx solid #A3C8FF;
border-radius: 10rpx;
}
.wx-text{
height: 28rpx;
line-height: 28rpx;
font-size: 30rpx;
width: 310rpx;
height: 64rpx;
background: #2D81FF;
border-radius: 32px;
text-align: center;
font-size: 26rpx;
line-height: 64rpx;
font-family: PingFang SC;
font-weight: 400;
color: #B2B5BB;
margin-top: 20rpx;
color: #FEFEFE;
margin-top: 50rpx;
}
}
... ...