APP
/
uni_cli_dy_verify
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add style

dev
刘嘉炜 3 weeks ago
parent
37f96fa3fe
commit
d7acca68e0
3 changed files with 302 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 100
      src/subpackage/groupon/components/site/footer.vue
  2. 190
      src/subpackage/groupon/components/site/table.vue
  3. 76
      src/subpackage/groupon/pages/site_select.vue

100
src/subpackage/groupon/components/site/footer.vue
View File

@ -0,0 +1,100 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
onLoad(() => {
});
</script>
<template>
<view class="site-footer">
<view class="vsm-explain">
<view class="ve-item">
<view class="vi-view"></view>
<view class="vi-view">可预订</view>
</view>
<view class="ve-item">
<view class="vi-view"></view>
<view class="vi-view">会员价</view>
</view>
<view class="ve-item">
<view class="vi-view"></view>
<view class="vi-view">已售完</view>
</view>
<view class="ve-item">
<view class="vi-view"></view>
<view class="vi-view">已选择</view>
</view>
</view>
<view class="sf-submit-bar">
<view class="ssb-price">¥0.00 </view>
<view class="ssb-btn">请选择场地</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.site-footer{
background-color: #fff;
@include isPd(10upx);
.vsm-explain{
height: 128upx;
@include ctf(center);
.ve-item{
margin: 20upx;
&:nth-child(2)>.vi-view:first-child{
background-color: #fff;
border-color: #FF873D;
}
&:nth-child(3)>.vi-view:first-child{
background-color: #D7D7DD;
border-color: #D7D7DD;
}
&:nth-child(4)>.vi-view:first-child{
background-color: $mColor;
}
>.vi-view{
&:first-child{
margin: 0 auto 8upx;
width: 40upx;
height: 22upx;
border-radius: 6upx;
border: 1px solid $mColor;
}
&+.vi-view{
text-align: center;
@include flcw(28upx, 40upx, #9a9a9d);
}
}
}
}
.sf-submit-bar{
padding: 20upx 40upx 0;
display: flex;
align-items: baseline;
justify-content: flex-end;
.ssb-price{
flex-grow: 1;
text-align: right;
@include flcw(38upx, 64upx, #FF873D);
@include tHide;
}
.ssb-btn{
flex-shrink: 0;
margin-left: 32upx;
width: 290upx;
height: 88upx;
text-align: center;
border-radius: 44upx;
background-color: #FF873D;
@include flcw(32upx, 88upx, #fff);
&.un-active{
background-color: #ffcfb1;
}
}
}
}
</style>

190
src/subpackage/groupon/components/site/table.vue
View File

@ -0,0 +1,190 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref, computed } from 'vue';
const props = defineProps({
tableData: { default: [] }
})
const timeList = computed(_=> {
if(!props?.tableData?.length)return [];
let _items = props?.tableData?.[0]?.items ?? [], _tempArr;
_tempArr = _items.reduce((_arr, val)=>_arr.concat(val.time.split('-')), []);
// 去重前减掉最后一位，去重后再补上
// 00:00-00:30 && 23:00-00:00 ，这两个时间段去重后少一个节点
return [...new Set(_tempArr.splice(0, _tempArr.length-2)), _tempArr[_tempArr.length-1]];
})
onLoad(() => {
});
</script>
<template>
<scroll-view class="sm-table-data" scroll-x scroll-y>
<view class="std-box">
<!-- 左侧栏 -->
<view class="std-left-sticky">
<view class="sls-item" v-for="(e,i) in timeList" :key="i">
<view class="si-txt">{{ e || '-' }}</view>
</view>
</view>
<!-- 顶部栏 -->
<view class="std-top-sticky">
<view class="sts-item" v-for="(e, i) in tableData" :key="i">{{ e.name || '-' }}</view>
</view>
<view class="std-data">
<view class="sd-column" v-for="(e, i) in tableData" :key="i">
<view class="sc-row" v-for="(k, j) in e.items" :key="j">
<view
class="sr-item"
:class="{
orange: i === 0&j%2,
gray: i === 1&j%3,
sold: i === 2&j%5,
}"
>
<view class="sr-sold" v-if="i === 2&j%5">已售</view>
<block v-else>
<view class="sr-price">¥60.00</view>
<view class="sr-del" v-if="i === 0&j%2">¥60.00</view>
</block>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<style lang="scss" scoped>
.sm-table-data{
position: relative;
height: 600upx;
background-color: #F2F2F7;
.std-box{
width: fit-content;
padding-bottom: 60upx;
background-color: #F2F2F7;
}
.std-left-sticky{
position: sticky;
left: 0;
float: left;
z-index: 5;
height: fit-content;
background-color: #F2F2F7;
.sls-item{
position: relative;
width: 112upx;
height: 100upx;
border-right: 2upx solid #D8D8D8;
&:first-child{
height: 72upx;
}
.si-txt{
position: absolute;
right: 0;
bottom: 0;
transform: translateY(50%);
padding-right: 20upx;
width: 100%;
text-align: right;
@include flcw(24upx, 34upx, #333);
@include tHide;
}
&:not(:first-child){
&::after{
content: '';
display: block;
width: 12upx;
height: 2upx;
position: absolute;
right: 0;
bottom: 0;
transform: translateY(50%);
background-color: #D8D8D8;
}
}
}
}
.std-top-sticky{
position: sticky;
top: 0;
z-index: 2;
width: fit-content;
white-space: nowrap;
font-size: 0;
background-color: #fff;
.sts-item{
width: 196upx;
display: inline-block;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 2upx solid #D8D8D8;
background-color: #fff;
@include flcw(24upx, 70upx, #333, 500);
}
}
.std-data{
white-space: nowrap;
width: fit-content;
.sd-column{
display: inline-block;
width: 196upx;
.sc-row{
padding: 1px;
width: 100%;
height: 100upx;
.sr-item{
width: 100%;
height: 100%;
border: 1px solid $mColor;
border-radius: 10upx;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
background-color: #fff;
>view{
flex-shrink: 0;
width: 100%;
padding: 0 10upx;
text-align: center;
@include tHide;
@include flcw(28upx, 40upx, $mColor);
}
.sr-sold{
color: #9A9A9D;
}
.sr-del{
@include flcw(20upx, 28upx, #9A9A9D);
}
&.orange{
border-color: #FF873D;
.sr-price{
color: #FF873D;
}
}
&.gray{
border-color: #D7D7DD;
color: #9A9A9D;
.sr-price{
color: #9A9A9D;
}
}
&.sold{
border-color: #D7D7DD;
background-color: #D7D7DD;
}
}
}
}
}
}
</style>

76
src/subpackage/groupon/pages/site_select.vue
View File

@ -2,15 +2,10 @@
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref, computed } from 'vue';
import { stadiumBookList } from "@/api";
import siteTable from "../components/site/table.vue";
import siteFooter from "../components/site/footer.vue";
const siteData = ref([]);
const timeList = computed(_=> {
let _items = siteData?.value?.[0]?.items ?? [], _tempArr;
_tempArr = _items.reduce((_arr, val)=>_arr.concat(val.time.split('-')), []);
// 去重前减掉最后一位，去重后再补上
// 00:00-00:30 && 23:00-00:00 ，这两个时间段去重后少一个节点
return [...new Set(_tempArr.splice(0, _tempArr.length-2)), _tempArr[_tempArr.length-1]];
})
onLoad(() => {
stadiumBookList({ data: {
stadium_id: 167,
@ -56,18 +51,10 @@ onLoad(() => {
<view class="si-day">6月10日</view>
</view>
</scroll-view>
<scroll-view class="sm-site-data" scroll-x scroll-y>
<!-- 得左边栏先渲染，占据当前ele的宽度，后续渲染元素都会跟随。 float和sticky关键-->
<view class="ssd-left-sticky">
<view class="sls-item" v-for="(e,i) in timeList" :key="i">
<view class="si-txt">{{ e || '-'}}</view>
<site-table :table-data="siteData"></site-table>
</view>
</view>
<view class="ssd-top-sticky">
<view class="sts-item" v-for="(e, i) in siteData" :key="i">{{ e?.name ?? '-' }}</view>
</view>
</scroll-view>
<view class="ss-footer">
<site-footer></site-footer>
</view>
</view>
</template>
@ -188,56 +175,11 @@ onLoad(() => {
}
}
}
.sm-site-data{
position: relative;
height: 500upx;
.ssd-top-sticky{
position: sticky;
top: 0;
z-index: 2;
width: fit-content;
white-space: nowrap;
background-color: #ff0;
font-size: 0;
.sts-item{
width: 196upx;
display: inline-block;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px solid #D8D8D8;
@include flcw(24upx, 70upx, #333, 500);
}
}
.ssd-left-sticky{
position: sticky;
}
.ss-footer{
position: fixed;
left: 0;
top: 0;
float: left;
background-color: rgba($color: pink, $alpha: .7);
z-index: 5;
height: fit-content;
.sls-item{
position: relative;
width: 112upx;
height: 100upx;
background-color: #fff;
border-right: 2upx solid #D8D8D8;
.si-txt{
position: absolute;
right: 0upx;
bottom: -36upx;
z-index: 1;
padding-right: 16upx;
bottom: 0;
width: 100%;
text-align: right;
@include tHide(1);
@include flcw(24upx, 100upx, #333);
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save