徐浩 / zzxyt-uniapp · 提交

转到一个项目

作者 mxd
提交 c4266a56d6c41db498e8d3f09693862fd5bff005 1 个父辈 5b3cbb45

选择座位

内嵌 并排对比
正在显示 1 个修改的文件 包含 96 行增加 和 218 行删除
1 <template> 1 <template>
2 - <view class="wrap_box">  
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <view class="tel_index_bg"></view>  
5 - 2 + <view class="wrap_box">
  3 + <view class="course-info" v-if="datas.info">
  4 + <view class="course-info-title">
  5 + <text class="classroom">{{datas.info.pid}}</text>
  6 + <view class="tit">
  7 + {{datas.info.title}}
  8 + </view>
  9 + </view>
  10 + <view class="course-info-content">
  11 + 课程详情：{{datas.info.content}}
  12 + </view>
  13 + </view>
6 14
7 - <view class="vio_list">  
8 - <view class="main_list">  
9 - <view v-if="datas.info" class="main_top">  
10 - <view class="main_tit">  
11 - {{datas.info.title}} <text>{{datas.info.pid}}</text> 15 + <movable-area class="main_center">
  16 + <movable-view class="movable-view" :style="{width:datas.width*40+'rpx'}" :out-of-bounds="true" :scale="true" :x="x+'rpx'" :y="y" direction="all" @change="onChange">
  17 + <view v-if="datas.list" class="seat_list_box">
  18 + <view v-if="datas.info.pid=='1号教室'" class="seat_d1 seat_d2 dis_flex aic ju_c" >
  19 + <image class="jt4" src="/static/images/jt4.png" mode="widthFix"></image>
  20 +
12 </view> 21 </view>
13 - <view class="">  
14 - 课程详情：{{datas.info.content}} 22 + <view v-else class="seat_d1 dis_flex aic ju_c" :style="{width:datas.width*40+'rpx'}">
  23 + <image class="jt3" src="/static/images/seat_dais.png" mode="aspectFill"></image>
15 </view> 24 </view>
16 - </view>  
17 - <movable-area class="main_center">  
18 - <!-- <movable-view class="seat_list" :scale="true" :x="x" :y="y" direction="all" @change="onChange">  
19 - <view class="seat_d1 dis_flex aic ju_c">  
20 - <image src="/static/images/seat_dais.png" mode="aspectFill"></image>  
21 - </view>  
22 - <view class="zw_list">  
23 - <text class="icon icon-zuowei zw_li" v-for="(item,index) in 10"></text>  
24 - </view>  
25 - </movable-view> -->  
26 - <movable-view class="movable-view" :style="{width:datas.width*40+'rpx'}" :out-of-bounds="true" :scale="true" :x="x+'rpx'" :y="y" direction="all" @change="onChange">  
27 - <view v-if="datas.list" class="seat_list_box">  
28 - <view v-if="datas.info.pid=='1号教室'" class="seat_d1 seat_d2 dis_flex aic ju_c" >  
29 - <image class="jt4" src="/static/images/jt4.png" mode="widthFix"></image>  
30 -  
31 - </view>  
32 - <view v-else class="seat_d1 dis_flex aic ju_c" :style="{width:datas.width*40+'rpx'}">  
33 - <image class="jt3" src="/static/images/seat_dais.png" mode="aspectFill"></image>  
34 - </view>  
35 - <view class="zw_list" :style="{width:datas.width*40+'rpx'}">  
36 - <view class="zw_li_box dis_flex aic ju_c" v-for="(item,index) in datas.list">  
37 - <block v-if="item.type==1">  
38 - <text v-if="item.is_check==1" class="icon icon-zuowei zw_li" style="color: #ff5151;"></text>  
39 - <text v-else-if="index==my_seat_index" class="icon icon-zuowei zw_li" style="color: #ff9000;" @click="my_seat_index='-1'"></text>  
40 - <text v-else class="icon icon-zuowei zw_li" @click="my_seat_index=index"></text>  
41 - </block>  
42 - <block v-if="item.type==9">  
43 - <text class="icon icon-zuowei zw_li" style="color: #c4c4c4;"></text>  
44 -  
45 - </block>  
46 -  
47 - </view>  
48 - </view> 25 + <view class="zw_list" :style="{width:datas.width*40+'rpx'}">
  26 + <view class="zw_li_box dis_flex aic ju_c" v-for="(item,index) in datas.list">
  27 + <block v-if="item.type==1">
  28 + <text v-if="item.is_check==1" class="icon icon-zuowei zw_li" style="color: #ff5151;"></text>
  29 + <text v-else-if="index==my_seat_index" class="icon icon-zuowei zw_li" style="color: #ff9000;" @click="my_seat_index='-1'"></text>
  30 + <text v-else class="icon icon-zuowei zw_li" @click="my_seat_index=index"></text>
  31 + </block>
  32 + <block v-if="item.type==9">
  33 + <text class="icon icon-zuowei zw_li" style="color: #c4c4c4;"></text>
  34 +
  35 + </block>
  36 +
49 </view> 37 </view>
50 - </movable-view>  
51 - </movable-area>  
52 - <view class="my_seat">  
53 - <view class="">你选的座位</view>  
54 - <text class="">{{my_seat_index==-1?'':datas.list[my_seat_index].title}}</text>  
55 - </view>  
56 - </view>  
57 - <view class="bz_add" >  
58 - <view @click="save_fuc" data-url="/pagesA/stu_bz_edit/stu_bz_edit">  
59 - 确认选座 38 + </view>
60 </view> 39 </view>
  40 + </movable-view>
  41 + </movable-area>
  42 +
  43 + <view class="my_seat">
  44 + <view class="">你选的座位</view>
  45 + <text v-show="my_seat_index != -1">{{datas.list[my_seat_index].title}}</text>
  46 + </view>
  47 +
  48 + <view class="bz_add" >
  49 + <view @click="save_fuc" data-url="/pagesA/stu_bz_edit/stu_bz_edit">
  50 + 确认选座
61 </view> 51 </view>
62 </view> 52 </view>
63 53
64 - <!-- 阻止滑动 -->  
65 - <!-- <view @touchmove.stop.prevent='test'></view> -->  
66 </view> 54 </view>
67 </template> 55 </template>
68 56
@@ -1222,176 +1210,56 @@ @@ -1222,176 +1210,56 @@
1222 // #ifdef H5 1210 // #ifdef H5
1223 min-height: calc(100vh - 44px); 1211 min-height: calc(100vh - 44px);
1224 // #endif 1212 // #endif
1225 - background: #F8F8F8;  
1226 - position: relative;  
1227 -}  
1228 -  
1229 -.tel_index_bg {  
1230 - position: absolute;  
1231 - top: 0;  
1232 - z-index: 1;  
1233 - width: 100%;  
1234 - min-height: 220rpx;  
1235 - background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);  
1236 -}  
1237 -.top_tabs{  
1238 - width: 100%;  
1239 -}  
1240 -.vip_tab_list{  
1241 - // padding: 0 30rpx;  
1242 -}  
1243 -.vip_tab_li{  
1244 - height: 90rpx;  
1245 - display: inline-flex;  
1246 - align-items: center;  
1247 - font-size: 30rpx;  
1248 - color: #FFFFFF;  
1249 - opacity: 0.6;  
1250 -  
1251 - position: relative;  
1252 - &+.vip_tab_li{  
1253 - margin-left: 50rpx;  
1254 - }  
1255 - &.active{  
1256 - opacity: 1;  
1257 -  
1258 - &:after{  
1259 - content: '';  
1260 - position: absolute;  
1261 - bottom: 0;  
1262 - left: 50%;  
1263 - margin-left: -18rpx;  
1264 - width: 36rpx;  
1265 - height: 6rpx;  
1266 - background: #FFFFFF;  
1267 - border-radius: 3rpx;  
1268 - }  
1269 - }  
1270 -}  
1271 -.vio_sx{  
1272 - height: 100rpx;  
1273 - justify-content: space-between;  
1274 - border-bottom: 1px solid #eee;  
1275 -}  
1276 -.vio_time{  
1277 -  
1278 - // padding: 0 24rpx;  
1279 - font-size: 30rpx;  
1280 - color: #7D8087;  
1281 - letter-spacing: 0;  
1282 - display: flex;  
1283 - align-items: center;  
1284 - .icon{  
1285 - font-size: 20rpx;  
1286 - margin-left: 5rpx;  
1287 - color: #999999;  
1288 - opacity: .5;  
1289 - }  
1290 - input{  
1291 - font-size: 30rpx;  
1292 - color: #7D8087;  
1293 - text-align: right;  
1294 - padding: 0 10rpx;  
1295 - }  
1296 -}  
1297 -.vio_int{  
1298 - font-size: 30rpx;  
1299 - color: #7D8087;  
1300 - text-align: right;  
1301 - padding: 0 10rpx;  
1302 -}  
1303 -/deep/ .vip_intpl{  
1304 - color: #D5D7DA;  
1305 -}  
1306 -.vio_list{  
1307 - width: 100%;  
1308 - // padding: 0 30rpx 30rpx;  
1309 - padding:20rpx 30rpx 30rpx; 1213 + background: #fff;
1310 position: relative; 1214 position: relative;
1311 - z-index: 2;  
1312 - .main_list{  
1313 - background: #FFFFFF;  
1314 - border-radius: 10rpx;  
1315 - // padding:0 30rpx;  
1316 - }  
1317 -  
1318 } 1215 }
1319 -  
1320 -.bz_add{  
1321 - width: 100%;  
1322 - // position: fixed;  
1323 - // bottom: 0;  
1324 - background: #f8f8f8;  
1325 - z-index: 800;  
1326 - // left: 0;  
1327 - padding:30rpx 0;  
1328 - view{  
1329 - font-size: 32rpx;  
1330 - color: #FFFFFF;  
1331 - width: 100%;  
1332 - height: 90rpx;  
1333 - background: #2D81FF;  
1334 - border-radius: 10rpx; 1216 +.course-info {
  1217 + padding: 20rpx;
  1218 + &-title {
1335 display: flex; 1219 display: flex;
1336 align-items: center; 1220 align-items: center;
1337 - justify-content: center;  
1338 - }  
1339 -}  
1340 -.main_top{  
1341 - width: 100%;  
1342 - padding: 30rpx;  
1343 - font-size: 28rpx;  
1344 - color: #929399;  
1345 - border-bottom: 1px solid #eee;  
1346 - line-height: 45rpx;  
1347 - .main_tit{  
1348 - font-size: 32rpx;  
1349 - color: #545D71;  
1350 - margin-bottom: 20rpx; 1221 + font-size: 30rpx;
  1222 + font-family: PingFang SC;
1351 font-weight: bold; 1223 font-weight: bold;
1352 - line-height: 55rpx;  
1353 - // display: flex;  
1354 - // align-items: center;  
1355 - // flex-wrap: wrap;  
1356 - text{  
1357 - height: 48rpx;  
1358 - line-height: 48rpx;  
1359 - display: inline-flex;  
1360 - align-items: center;  
1361 - padding: 0 12rpx;  
1362 - background: rgba(45, 129, 255, .1);  
1363 - border-radius: 10rpx; 1224 + color: #323232;
  1225 + .classroom {
  1226 + background: #FE7631;
  1227 + border-radius: 5rpx;
  1228 + padding: 7rpx 20rpx;
1364 font-size: 26rpx; 1229 font-size: 26rpx;
1365 - color: #2D81FF;  
1366 - font-weight: normal;  
1367 - margin-left: 20rpx; 1230 + font-family: PingFang SC;
  1231 + font-weight: 500;
  1232 + color: #FAFBFA;
  1233 + margin-right: 20rpx;
  1234 + }
  1235 + .tit {
  1236 + flex: 1;
1368 } 1237 }
1369 } 1238 }
  1239 + &-content {
  1240 + font-size: 26rpx;
  1241 + font-family: PingFang SC;
  1242 + font-weight: 500;
  1243 + color: #646464;
  1244 + margin-top: 20rpx;
  1245 + }
1370 } 1246 }
  1247 +
1371 .main_center{ 1248 .main_center{
1372 width: 100%; 1249 width: 100%;
1373 height: 737rpx; 1250 height: 737rpx;
1374 border-bottom: 1px solid #eee; 1251 border-bottom: 1px solid #eee;
1375 overflow: hidden; 1252 overflow: hidden;
  1253 + margin-top: 30rpx;
1376 } 1254 }
  1255 +
1377 .seat_list{ 1256 .seat_list{
1378 - // width: 180rpx;  
1379 - // height: 180rpx;  
1380 min-width: 690rpx; 1257 min-width: 690rpx;
1381 -  
1382 min-height: 737rpx; 1258 min-height: 737rpx;
1383 background: #fff; 1259 background: #fff;
1384 padding: 22rpx; 1260 padding: 22rpx;
1385 - // display: flex;  
1386 - // align-items: center;  
1387 - // justify-content: center;  
1388 1261
1389 } 1262 }
1390 -  
1391 -.seat_list1{  
1392 - // width: 1899rpx;  
1393 - // height: 1448rpx;  
1394 -}  
1395 .my_seat{ 1263 .my_seat{
1396 width: 100%; 1264 width: 100%;
1397 padding: 0 30rpx; 1265 padding: 0 30rpx;
@@ -1400,22 +1268,20 @@ @@ -1400,22 +1268,20 @@
1400 color: #5B6476; 1268 color: #5B6476;
1401 display: flex; 1269 display: flex;
1402 align-items: center; 1270 align-items: center;
1403 - justify-content: space-between;  
1404 text{ 1271 text{
1405 - font-size: 28rpx;  
1406 - color: #5B6476;  
1407 - min-width: 118rpx;  
1408 - height: 55rpx;  
1409 - padding: 0 15rpx;  
1410 - background: rgba(169, 177, 192, .1); 1272 + background: #FAFAFA;
  1273 + border: 1px solid #CACACA;
1411 border-radius: 10rpx; 1274 border-radius: 10rpx;
1412 - display: flex;  
1413 - align-items: center;  
1414 - justify-content: center; 1275 + font-size: 26rpx;
  1276 + font-family: PingFang SC;
  1277 + font-weight: 500;
  1278 + color: #40C8A9;
  1279 + padding: 20rpx 52rpx;
  1280 + margin-left: 30rpx;
1415 } 1281 }
1416 } 1282 }
  1283 +
1417 .zw_list{ 1284 .zw_list{
1418 - // min-width: 600rpx;  
1419 padding-top: 20rpx; 1285 padding-top: 20rpx;
1420 display: flex; 1286 display: flex;
1421 flex-wrap: wrap; 1287 flex-wrap: wrap;
@@ -1423,9 +1289,7 @@ @@ -1423,9 +1289,7 @@
1423 width: 40rpx; 1289 width: 40rpx;
1424 height: 40rpx; 1290 height: 40rpx;
1425 .zw_li{ 1291 .zw_li{
1426 - // margin: 10rpx;  
1427 color: #F2F2F2; 1292 color: #F2F2F2;
1428 - // font-size: 60rpx;  
1429 font-size: 30rpx; 1293 font-size: 30rpx;
1430 } 1294 }
1431 } 1295 }
@@ -1436,7 +1300,6 @@ @@ -1436,7 +1300,6 @@
1436 height: 900rpx; 1300 height: 900rpx;
1437 } 1301 }
1438 .seat_list_box{ 1302 .seat_list_box{
1439 - // padding: 0 30rpx;  
1440 min-width: 690rpx; 1303 min-width: 690rpx;
1441 display: flex; 1304 display: flex;
1442 flex-direction: column; 1305 flex-direction: column;
@@ -1459,4 +1322,19 @@ @@ -1459,4 +1322,19 @@
1459 height: auto; 1322 height: auto;
1460 } 1323 }
1461 } 1324 }
  1325 +
  1326 +.bz_add{
  1327 + background: #f8f8f8;
  1328 + padding: 30rpx;
  1329 + view{
  1330 + background: #2D81FF;
  1331 + border-radius: 44rpx;
  1332 + font-size: 34rpx;
  1333 + font-family: PingFang SC;
  1334 + font-weight: 500;
  1335 + color: #FFFFFF;
  1336 + line-height: 88rpx;
  1337 + text-align: center;
  1338 + }
  1339 +}
1462 </style> 1340 </style>