shuai16.wang
/
smart-screen-demo-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'dev_230517' of https://git.qdhtt.cn/shuai16.wang/smart-screen-demo-web into dev_230517

dev_230517
zhangzhiyi 2 years ago
parent
c2c3265c54 7052c187ac
commit
d206ef7825
14 changed files with 326 additions and 1015 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      index.html
  2. BIN
      src/assets/imgs/show/close.png
  3. 828
      src/assets/libs/js/BBbundle.js
  4. 10
      src/assets/libs/js/vconsole.js
  5. 7
      src/router.ts
  6. 15
      src/styles/framework/base/flexbox.scss
  7. 46
      src/view/tabs/fixed-time.vue
  8. 122
      src/view/tabs/scene.vue
  9. 110
      src/view/tabs/tabs.vue
  10. 24
      src/view/timing/timing-add.vue
  11. 13
      src/view/timing/timing-select-device.vue
  12. 15
      src/view/timing/timing-select-time.vue
  13. 32
      src/view/timing/timing-sure-delete.vue
  14. 103
      src/view/ui/env-select.vue

14
index.html
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/imgs/show/close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

828
src/assets/libs/js/BBbundle.js
View File

File diff suppressed because one or more lines are too long

10
src/assets/libs/js/vconsole.js
View File

File diff suppressed because one or more lines are too long

7
src/router.ts
Unescape View File

@ -73,10 +73,17 @@ const projectRoutes = [
component: () => import("@/view/timing/timing-select-device.vue"), component: () => import("@/view/timing/timing-select-device.vue"),
}, },
{ {
//定时选择时间
name: "timingSelectTime", name: "timingSelectTime",
path: "/timingSelectTime", path: "/timingSelectTime",
component: () => import("@/view/timing/timing-select-time.vue"), component: () => import("@/view/timing/timing-select-time.vue"),
}, },
{
//环境模拟选择
name: "envSelect",
path: "/envSelect",
component: () => import("@/view/ui/env-select.vue"),
},
// 非哈希路由暂不启用 // 非哈希路由暂不启用
{ {
name: "notFound", name: "notFound",

15
src/styles/framework/base/flexbox.scss
Unescape View File

@ -256,7 +256,13 @@ Flex, Grow, & Shrink 待确定
text-align: center; text-align: center;
font-size: 40px; font-size: 40px;
} }
//card列表父布局
.zhp-item-bg{
display: flex;
justify-content: space-between;
padding: 24px;
flex-wrap: wrap;
}
//智慧屏背景 //智慧屏背景
.base-bg { .base-bg {
display: flex; display: flex;
@ -265,6 +271,13 @@ Flex, Grow, & Shrink 待确定
background-image: url("@/assets/imgs/show/bg_timing.png"); background-image: url("@/assets/imgs/show/bg_timing.png");
height: 100vh; height: 100vh;
width: 720px; width: 720px;
//智慧右侧图片
.rightImg {
width: 48px;
height: 48px;
position: absolute;
right: 24px;
}
//智慧屏返回键 //智慧屏返回键
.leftImg { .leftImg {
width: 48px; width: 48px;

46
src/view/tabs/fixed-time.vue
Unescape View File

@ -3,7 +3,7 @@
<div class="layout-box-vertical layout-items-center"> <div class="layout-box-vertical layout-items-center">
<div class="base-timing-card-title"> <div class="base-timing-card-title">
<div class="layout-box-horizontal"> <div class="layout-box-horizontal">
<div class="base-timing-card-title-t">定时</div> <div class="base-timing-card-title-t" @click="envSelect">定时</div>
<img <img
class="base-timing-card-title-add" class="base-timing-card-title-add"
src="@/assets/imgs/show/btn_item_timing_add.png" src="@/assets/imgs/show/btn_item_timing_add.png"
@ -23,7 +23,7 @@
<div <div
v-for="(item, i) in navList" v-for="(item, i) in navList"
v-show="navList.length > 0" v-show="navList.length > 0"
:key="i" :key="item.id"
@click="onItemClick(item)" @click="onItemClick(item)"
> >
<div <div
@ -63,11 +63,25 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ref } from "vue"; import { getCurrentInstance, onBeforeMount, ref } from "vue";
import { TimingDto } from "@/dto/timing-dto"; import { TimingDto } from "@/dto/timing-dto";
import { Toast } from "vant";
const { proxy } = getCurrentInstance() as any;
const router = useRouter(); const router = useRouter();
let isCreat = false;
const runFun = (index: any) => {
Toast("删除角标" + index);
navList.value.splice(index, 1);
};
/**
* 环境模拟选择
*/
const envSelect = () => {
router.push("/envSelect");
};
/** /**
* 切换选中状态 * 切换选中状态
*/ */
@ -92,12 +106,21 @@ const onClickAdd = () => {
* 删除定时 * 删除定时
*/ */
const onItemDelete = (index: number) => { const onItemDelete = (index: number) => {
router.push("/timingSureDelete"); router.push({
path: "/timingSureDelete",
query: { pageType: "timingSureDelete", index: index }
});
// navList.value.splice(index, 1); // navList.value.splice(index, 1);
// if (navList.value.length === 0) { // if (navList.value.length === 0) {
// //显示无数据内容 // //显示无数据内容
// } // }
}; };
onBeforeMount(() => {
if (!isCreat) {
isCreat = true;
proxy.$eventBusService.on("timingDelete", runFun);
}
});
const navList = ref([ const navList = ref([
{ {
@ -105,26 +128,31 @@ const navList = ref([
time: "2.5", time: "2.5",
name: "主卧空调", name: "主卧空调",
state: false, state: false,
selectState: false, selectState: false
}, },
{ {
id: 1, id: 1,
time: "3.0", time: "3.0",
name: "次卧空调", name: "次卧空调",
state: true, state: true,
selectState: false, selectState: false
}, },
{ {
id: 2, id: 2,
time: "4.0", time: "4.0",
name: "餐厅空调", name: "餐厅空调",
state: false, state: false,
selectState: false, selectState: false
}, }
]); ]);
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.sy {
width: 672px;
background-color: rebeccapurple;
}
.base-timing-card { .base-timing-card {
background-image: url("@/assets/imgs/show/bg_timing.png"); background-image: url("@/assets/imgs/show/bg_timing.png");
height: 100vh; height: 100vh;

122
src/view/tabs/scene.vue
Unescape View File

@ -1,20 +1,14 @@
<template> <template>
<div class="base-scene-card safe-area-inset-bottom"> <div class="base-bg">
<div class="layout-box-vertical layout-items-center" style="height: 100vh"> <div class="zhp-title">
<div class="base-scene-card-title"> <div class="zhp-title-text">场景</div>
<div class="layout-items-center" style="flex-shrink: 0"> </div>
<div class="base-scene-card-title-t">场景</div> <div class="zhp-item-bg" style="overflow: auto">
</div> <div v-for="(item, i) in navList" :key="i">
</div> <div class="base-scene-card-content-bg" @click="onItemClick(item)">
<div class="base-scene-card-content" style="flex: 1; overflow: auto"> <img class="stateBgf" :src="item.img" />
<div v-for="(item, i) in navList" :key="i"> <div class="function">
<div class="base-scene-card-content-bg" @click="onItemClick(item)"> {{ item.name }}
<div class="layout-box-horizontal layout-items-center">
<img class="stateBg" :src="item.img" />
<div class="function">
{{ item.name }}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -46,110 +40,70 @@ const navList = ref([
id: 0, id: 0,
img: "/src/assets/imgs/show/icon_tyzl.png", img: "/src/assets/imgs/show/icon_tyzl.png",
name: "统一制冷", name: "统一制冷",
progress: 0.5, progress: 0.5
}, },
{ {
id: 1, id: 1,
img: "/src/assets/imgs/show/icon_tyzr.png", img: "/src/assets/imgs/show/icon_tyzr.png",
name: "统一制热", name: "统一制热",
progress: 0.8, progress: 0.8
}, },
{ {
id: 2, id: 2,
img: "/src/assets/imgs/show/icon_kszl.png", img: "/src/assets/imgs/show/icon_kszl.png",
name: "快速制冷", name: "快速制冷",
progress: 0.3, progress: 0.3
}, },
{ {
id: 3, id: 3,
img: "/src/assets/imgs/show/icon_kszr.png", img: "/src/assets/imgs/show/icon_kszr.png",
name: "快速制热", name: "快速制热",
progress: 0.5, progress: 0.5
}, },
{ {
id: 4, id: 4,
img: "/src/assets/imgs/show/icon_hwxf.png", img: "/src/assets/imgs/show/icon_hwxf.png",
name: "恒温新风", name: "恒温新风",
progress: 0.8, progress: 0.8
}, },
{ {
id: 5, id: 5,
img: "/src/assets/imgs/show/icon_zhqg.png", img: "/src/assets/imgs/show/icon_zhqg.png",
name: "智慧全感", name: "智慧全感",
progress: 0.3, progress: 0.3
}, },
{ {
id: 6, id: 6,
img: "/src/assets/imgs/show/icon_ty.png", img: "/src/assets/imgs/show/icon_ty.png",
name: "通用", name: "通用",
progress: 0.3, progress: 0.3
}, }
]); ]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.base-scene-card { .base-scene-card-content-bg {
background-image: url("@/assets/imgs/show/bg_timing.png"); align-items: center;
height: 720px; justify-content: center;
width: 720px; margin-bottom: 20px;
height: 146px;
.base-scene-card-title { background-image: url(@/assets/imgs/show/bg_item_scene.png);
margin-top: 35px; background-size: contain;
margin-bottom: 35px; background-repeat: no-repeat;
width: 100%; width: 326px;
display: flex;
.base-scene-card-title-t { }
font-weight: 400;
font-size: 40px;
color: #ffffff;
width: 100%;
text-align: center;
}
}
.base-scene-card-content {
display: flex;
justify-content: space-between;
padding: 24px;
flex-wrap: wrap;
.base-scene-card-content-bg {
position: relative;
flex: 0 0 50%;
> div {
position: relative;
}
margin-bottom: 20px;
height: 146px;
background-image: url(@/assets/imgs/show/bg_item_scene.png);
background-size: contain;
background-repeat: no-repeat;
width: 326px;
}
.function {
margin-left: 30px;
line-height: 146px;
font-weight: 400;
font-size: 32px;
color: #ffffff;
}
.stateBg { .function {
margin-left: 52px; margin-left: 30px;
line-height: 146px; font-weight: 400;
background-size: contain; font-size: 32px;
background-repeat: no-repeat; color: #ffffff;
width: 60px;
height: 60px;
}
}
} }
.bottom-line { .stateBgf {
position: relative; width: 60px;
padding-top: 3px; height: 60px;
} }
</style> </style>

110
src/view/tabs/tabs.vue
Unescape View File

@ -1,54 +1,62 @@
<template> <template>
<div id="tabs-wrapper"> <div id="tabs-wrapper">
<!-- 下拉 --> <!-- 下拉 -->
<div <div
class="drop-down-menu" class="drop-down-menu"
@touchstart="dropDownMenuStart($event)" @touchstart="dropDownMenuStart($event)"
@touchmove="dropDownMenuMove($event)" @touchmove="dropDownMenuMove($event)"
@touchend="dropDownMenuEnd($event)"> @touchend="dropDownMenuEnd($event)">
</div> </div>
<DropDownMenu id="menu" v-show="showMenu" ref="menu" @pull-up="pullUp()"></DropDownMenu> <DropDownMenu id="menu" v-show="showMenu" ref="menu" @pull-up="pullUp()"></DropDownMenu>
<div class="swiper"> <div class="swiper">
<div class="swiper-wrapper" @touchstart.self> <div class="swiper-wrapper" @touchstart.self>
<div class="swiper-slide"> <div class="swiper-slide">
<div class="swiper-item"> <div class="swiper-item">
<div><FixedTime></FixedTime></div> <div>
<FixedTime></FixedTime>
</div> </div>
</div> </div>
<div class="swiper-slide"> </div>
<div class="swiper-item"> <div class="swiper-slide">
<div><HomeScreen></HomeScreen></div> <div class="swiper-item">
<div>
<HomeScreen></HomeScreen>
</div> </div>
</div> </div>
<div class="swiper-slide"> </div>
<div class="swiper-item"> <div class="swiper-slide">
<div><DeviceControl></DeviceControl></div> <div class="swiper-item">
<div>
<DeviceControl></DeviceControl>
</div> </div>
</div> </div>
<div class="swiper-slide"> </div>
<div class="swiper-item"> <div class="swiper-slide">
<div><Scene></Scene></div> <div class="swiper-item">
<div>
<Scene></Scene>
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-pagination"></div>
</div> </div>
<div class="swiper-pagination"></div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { import {
ref, ref,
onBeforeMount, onBeforeMount,
onMounted, onMounted,
nextTick, nextTick
} from 'vue'; } from "vue";
import { Swiper, Navigation, Pagination } from "swiper"; import { Swiper, Navigation, Pagination } from "swiper";
import FixedTime from './fixed-time.vue'; import FixedTime from "./fixed-time.vue";
import HomeScreen from './home-screen.vue'; import HomeScreen from "./home-screen.vue";
import DeviceControl from './device-control.vue'; import DeviceControl from "./device-control.vue";
import Scene from './scene.vue'; import Scene from "./scene.vue";
import DropDownMenu from '../drop-down-menu/drop-down-menu.vue'; import DropDownMenu from "../drop-down-menu/drop-down-menu.vue";
import "swiper/swiper-bundle.css"; import "swiper/swiper-bundle.css";
let mySwiper: Swiper; // 声明swiper let mySwiper: Swiper; // 声明swiper
@ -59,9 +67,9 @@ const showMenu = ref(false);
const menuDom: any = ref(); const menuDom: any = ref();
onMounted(() => { onMounted(() => {
initSwiper(); initSwiper();
menuDom.value = document.getElementById('menu') as HTMLElement | null; menuDom.value = document.getElementById("menu") as HTMLElement | null;
}) });
/** 初始化swiper */ /** 初始化swiper */
const initSwiper = () => { const initSwiper = () => {
@ -70,20 +78,20 @@ const initSwiper = () => {
// observer: true, // 修改swiper自己或子元素时，自动初始化swiper // observer: true, // 修改swiper自己或子元素时，自动初始化swiper
// observeParents: true, // 修改swiper的父元素时，自动初始化swiper // observeParents: true, // 修改swiper的父元素时，自动初始化swiper
pagination: { pagination: {
el: ".swiper-pagination", el: ".swiper-pagination"
}, //分页样式 }, //分页样式
touchStartPreventDefault : false, touchStartPreventDefault: false,
effect: "fade", //轮播图切换效果的类型 effect: "fade", //轮播图切换效果的类型
resistanceRatio: 0, resistanceRatio: 0
}); });
} };
/** 下拉菜单开始 */ /** 下拉菜单开始 */
const dropDownMenuStart = (event: any) => { const dropDownMenuStart = (event: any) => {
touchStart.value = 0; touchStart.value = 0;
touchDis.value = 0; touchDis.value = 0;
touchStart.value = event.targetTouches[0].pageY; touchStart.value = event.targetTouches[0].pageY;
} };
/** 下拉菜单移动 */ /** 下拉菜单移动 */
const dropDownMenuMove = (event: any) => { const dropDownMenuMove = (event: any) => {
@ -93,36 +101,36 @@ const dropDownMenuMove = (event: any) => {
if (document.documentElement.scrollTop === 0 && touchDis.value > 0) { if (document.documentElement.scrollTop === 0 && touchDis.value > 0) {
showMenu.value = true; showMenu.value = true;
if (menuDom.value) { if (menuDom.value) {
const top = (-(window.innerHeight) + touchDis.value) > 0? 0: (-(window.innerHeight) + touchDis.value); const top = (-(window.innerHeight) + touchDis.value) > 0 ? 0 : (-(window.innerHeight) + touchDis.value);
menuDom.value.style.top = `${top}px`; menuDom.value.style.top = `${top}px`;
} }
} else { } else {
showMenu.value = false; showMenu.value = false;
} }
} };
/** 下拉菜单结束 */ /** 下拉菜单结束 */
const dropDownMenuEnd = (event: any) => { const dropDownMenuEnd = (event: any) => {
if (touchDis.value > 0) { if (touchDis.value > 0) {
if (menuDom.value) { if (menuDom.value) {
menuDom.value.style.transition = `${(window.innerHeight - touchDis.value) / (window.innerHeight)}s`; menuDom.value.style.transition = `${(window.innerHeight - touchDis.value) / (window.innerHeight)}s`;
menuDom.value.style.top = '0'; menuDom.value.style.top = "0";
} }
} }
} };
/** 点击收起菜单 */ /** 点击收起菜单 */
const pullUp = () => { const pullUp = () => {
if (menuDom.value && (menuDom.value.style.top === '0px' || menuDom.value.style.top === '0')) { if (menuDom.value && (menuDom.value.style.top === "0px" || menuDom.value.style.top === "0")) {
menuDom.value.style.top = '-100vh'; menuDom.value.style.top = "-100vh";
menuDom.value.style.transition = '0.5s'; menuDom.value.style.transition = "0.5s";
// 0.5s动画时间。等时间过去隐藏 // 0.5s动画时间。等时间过去隐藏
setTimeout(() => { setTimeout(() => {
showMenu.value = false; showMenu.value = false;
menuDom.value.style.transition = '0s'; menuDom.value.style.transition = "0s";
}, 500); }, 500);
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

24
src/view/timing/timing-add.vue
Unescape View File

@ -65,7 +65,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Toast } from "vant"; import { Toast } from "vant";
import { onBeforeMount, ref } from "vue"; import { getCurrentInstance, onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
let selectNum = 0; let selectNum = 0;
@ -73,6 +73,21 @@ let time = 0;
const router = useRouter(); const router = useRouter();
const isOpen = ref(false); const isOpen = ref(false);
const { proxy } = getCurrentInstance() as any;
/**
* 选择设备数量
* @param index
*/
const selectNumEvent = (index: any) => {
selectNum = index;
};
/**
* 选择时间
* @param index
*/
const selectTimeEvent = (index: any) => {
time = index;
};
const onClickLeft = () => { const onClickLeft = () => {
onSaveClick(); onSaveClick();
}; };
@ -93,11 +108,8 @@ const onSelectDevice = () => {
}; };
onBeforeMount(() => { onBeforeMount(() => {
const query: any = router.currentRoute.value.query; proxy.$eventBusService.on("selectNumEvent", selectNumEvent);
if (query && query.pageType === "timingAdd") { proxy.$eventBusService.on("selectTimeEvent", selectTimeEvent);
selectNum = query.sListNum;
time = query.time;
}
}); });
const onSaveClick = () => { const onSaveClick = () => {

13
src/view/timing/timing-select-device.vue
Unescape View File

@ -64,10 +64,11 @@
// eslint-disable-next-line vue/no-export-in-script-setup // eslint-disable-next-line vue/no-export-in-script-setup
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { getCurrentInstance } from "vue";
const router = useRouter(); const router = useRouter();
const dList: any = ref<any[]>([]); const dList: any = ref<any[]>([]);
const { proxy } = getCurrentInstance() as any;
const onSelectDevice = (item: any) => { const onSelectDevice = (item: any) => {
//开机状态可选 //开机状态可选
if (item.state) { if (item.state) {
@ -75,6 +76,7 @@ const onSelectDevice = (item: any) => {
} }
}; };
const onSelectClick = (sure: boolean) => { const onSelectClick = (sure: boolean) => {
router.back();
if (sure) { if (sure) {
let number = 0; let number = 0;
dList.value.forEach((e: any) => { dList.value.forEach((e: any) => {
@ -82,14 +84,7 @@ const onSelectClick = (sure: boolean) => {
number++; number++;
} }
}); });
router.push({ proxy.$eventBusService.emit("selectNumEvent", number);
path: "/timingAdd",
query: { pageType: "timingAdd", sListNum: number },
});
} else {
router.push({
path: "/timingAdd",
});
} }
}; };
onMounted(() => { onMounted(() => {

15
src/view/timing/timing-select-time.vue
Unescape View File

@ -11,20 +11,17 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { getCurrentInstance } from "vue";
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const onSelectClick = (sure: boolean) => { const onSelectClick = (sure: boolean) => {
router.back();
if (sure) { if (sure) {
let time = 0.5; let time = 0.5;
router.push({ proxy.$eventBusService.emit("selectTimeEvent", time);
path: "/timingAdd",
query: { pageType: "timingAdd", time: time },
});
} else {
router.push({
path: "/timingAdd",
});
} }
}; };
</script> </script>

32
src/view/timing/timing-sure-delete.vue
Unescape View File

@ -15,32 +15,30 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Toast } from "vant";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { onBeforeMount, ref } from "vue";
import { Toast } from "vant";
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
const router = useRouter(); const router = useRouter();
let index = 0;
/** /**
* 删除定时 * 删除定时
* @param b * @param sure
*/ */
const onDeleteClick = (b: boolean) => { const onDeleteClick = (sure: boolean) => {
if (b) { router.back();
Toast("删除成功");
}
};
const onSelectClick = (sure: boolean) => {
if (sure) { if (sure) {
router.push({ proxy.$eventBusService.emit("timingDelete", index);
path: "/tabs",
query: { pageType: "tabs", isDelete: "1" }
});
} else {
router.push({
path: "/tabs",
query: { pageType: "tabs", isDelete: "0" }
});
} }
}; };
onBeforeMount(() => {
const query: any = router.currentRoute.value.query;
if (query && query.pageType === "timingSureDelete") {
index = query.index;
}
});
</script> </script>
<style scoped> <style scoped>

103
src/view/ui/env-select.vue
Unescape View File

@ -0,0 +1,103 @@
<template>
<div class="base-bg">
<div class="zhp-title">
<img
class="rightImg"
src="@/assets/imgs/show/close.png"
@click="router.back()"
/>
<div class="zhp-title-text">环境模拟选择</div>
</div>
<div class="zhp-item-bg">
<div v-for="(item, i) in seasonList" :key="i">
<div class="seasonItem" @click="itemOnClick(item)">
<div class="tem-bg">
<div class="tem-text">{{ item.tem }}</div>
<div class="tem">℃</div>
<div
v-show="item.hum != 0"
class="tem-text"
style="margin-left: 25px"
>
{{ item.hum }}
</div>
<div v-show="item.hum != 0" class="tem">%</div>
</div>
<div class="tem">{{ item.season }}</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import router from "@/router";
import { Toast } from "vant";
const itemOnClick = (item: any) => {
Toast("获取的id" + item.id);
};
const seasonList = ref([
{
id: 1,
tem: "14",
season: "春季",
hum: 0
},
{
id: 2,
tem: "34",
season: "夏季",
hum: 0
},
{
id: 3,
tem: "16",
season: "梅雨季",
hum: 99
},
{
id: 4,
tem: "-4",
season: "冬季",
hum: 0
}
]);
</script>
<style lang="scss" scoped>
.seasonItem {
margin-top: 20px;
width: 330px;
height: 132px;
align-items: center;
justify-content: center;
flex-direction: column;
display: flex;
box-sizing: border-box;
border-radius: 8px;
background-color: #20252e;
.tem-bg {
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
.tem-text {
font-weight: 400;
font-size: 60px;
margin-right: 2px;
color: white;
}
}
.tem {
font-weight: 400;
font-size: 28px;
color: white;
}
}
</style>
Write Preview
Loading…
Cancel
Save