作者 mxd

校长信箱

1 <template> 1 <template>
2 <view class="twoMailbox"> 2 <view class="twoMailbox">
3 <!-- 校长信箱 --> 3 <!-- 校长信箱 -->
4 - <view class="header-wrap">  
5 - <view class="tabs-wrap area flex">  
6 - <view :class="current==index?'tabs-active':''" v-for="(item,index) in tabs" :key="index"  
7 - @tap="tabsClick(item,index)">  
8 - {{item}}  
9 - </view> 4 + <view class="tabs-wrap flex">
  5 + <view class="tabs-item" :class="current==index?'tabs-active':''" v-for="(item,index) in tabs" :key="index"
  6 + @tap="tabsClick(item,index)">
  7 + {{item}}
10 </view> 8 </view>
11 </view> 9 </view>
12 10
@@ -14,6 +12,9 @@ @@ -14,6 +12,9 @@
14 <template v-if="current==0"> 12 <template v-if="current==0">
15 <view class="wrap area"> 13 <view class="wrap area">
16 <view class="textarea-wrap area"> 14 <view class="textarea-wrap area">
  15 + <view class="icon">
  16 + <image src="/static/imagesV2/study/icon-edit.png"></image>
  17 + </view>
17 <textarea 18 <textarea
18 placeholder-style="font-size: 30rpx;font-family: PingFang SC;font-weight: 400;color: #B2B5BB;" 19 placeholder-style="font-size: 30rpx;font-family: PingFang SC;font-weight: 400;color: #B2B5BB;"
19 placeholder="请输入你要发送的内容" v-model="message" maxlength="-1" /> 20 placeholder="请输入你要发送的内容" v-model="message" maxlength="-1" />
@@ -169,29 +170,35 @@ @@ -169,29 +170,35 @@
169 } 170 }
170 171
171 .tabs-wrap { 172 .tabs-wrap {
172 - height: 76rpx; 173 + height: 88rpx;
173 justify-content: space-around; 174 justify-content: space-around;
174 align-items: center; 175 align-items: center;
175 - font-size: 32rpx; 176 + font-size: 28rpx;
176 font-family: PingFang SC; 177 font-family: PingFang SC;
177 font-weight: 500; 178 font-weight: 500;
178 - color: rgba(255, 255, 255, 0.7);  
179 - 179 + color: #323232;
  180 + background-color: #fff;
  181 + border-top:1rpx solid #f3f4f6;
  182 + .tabs-item {
  183 + height: 100%;
  184 + display: flex;
  185 + align-items: center;
  186 + }
180 .tabs-active { 187 .tabs-active {
181 - color: #FFFFFF; 188 + color: #2D81FF;
182 position: relative; 189 position: relative;
183 } 190 }
184 191
185 .tabs-active::after { 192 .tabs-active::after {
186 content: ''; 193 content: '';
187 - width: 38rpx;  
188 - height: 6rpx;  
189 - background: #FFFFFF;  
190 - border-radius: 4rpx;  
191 position: absolute; 194 position: absolute;
192 - bottom: -18rpx;  
193 left: 50%; 195 left: 50%;
  196 + bottom: 0rpx;
194 transform: translate(-50%, 0); 197 transform: translate(-50%, 0);
  198 + background-image: url(@/static/imagesV2/icon23.png);
  199 + background-size: 100% 100%;
  200 + height: 24rpx;
  201 + width: 24rpx;
195 } 202 }
196 } 203 }
197 204
@@ -207,7 +214,13 @@ @@ -207,7 +214,13 @@
207 background: #FFFFFF; 214 background: #FFFFFF;
208 border-radius: 10rpx; 215 border-radius: 10rpx;
209 padding: 16rpx 20rpx; 216 padding: 16rpx 20rpx;
210 - 217 + display: flex;
  218 + .icon {
  219 + width: 30rpx;
  220 + height: 30rpx;
  221 + margin-right: 10rpx;
  222 + margin-top: 5rpx;
  223 + }
211 textarea { 224 textarea {
212 width: 100%; 225 width: 100%;
213 height: 100%; 226 height: 100%;
@@ -221,7 +234,7 @@ @@ -221,7 +234,7 @@
221 line-height: 90rpx; 234 line-height: 90rpx;
222 text-align: center; 235 text-align: center;
223 background: #2D81FF; 236 background: #2D81FF;
224 - border-radius: 10rpx; 237 + border-radius: 44rpx;
225 font-size: 32rpx; 238 font-size: 32rpx;
226 font-family: PingFang SC; 239 font-family: PingFang SC;
227 font-weight: 500; 240 font-weight: 500;
@@ -233,7 +246,6 @@ @@ -233,7 +246,6 @@
233 // 微信添加 246 // 微信添加
234 .wx-wrap { 247 .wx-wrap {
235 height: 392rpx; 248 height: 392rpx;
236 - background: #FFFFFF;  
237 border-radius: 10rpx; 249 border-radius: 10rpx;
238 flex-direction: column; 250 flex-direction: column;
239 justify-content: center; 251 justify-content: center;
@@ -246,15 +258,21 @@ @@ -246,15 +258,21 @@
246 .code-img{ 258 .code-img{
247 width: 240rpx; 259 width: 240rpx;
248 height: 240rpx; 260 height: 240rpx;
  261 + border: 4rpx solid #A3C8FF;
  262 + border-radius: 10rpx;
249 } 263 }
250 .wx-text{ 264 .wx-text{
251 - height: 28rpx;  
252 - line-height: 28rpx;  
253 - font-size: 30rpx; 265 + width: 310rpx;
  266 + height: 64rpx;
  267 + background: #2D81FF;
  268 + border-radius: 32px;
  269 + text-align: center;
  270 + font-size: 26rpx;
  271 + line-height: 64rpx;
254 font-family: PingFang SC; 272 font-family: PingFang SC;
255 font-weight: 400; 273 font-weight: 400;
256 - color: #B2B5BB;  
257 - margin-top: 20rpx; 274 + color: #FEFEFE;
  275 + margin-top: 50rpx;
258 } 276 }
259 277
260 } 278 }