From 3c276ecb11013fef6f1416f06c1fb1b201ed3038 Mon Sep 17 00:00:00 2001 From: Teng <461587751@qq.com> Date: Wed, 12 Mar 2025 15:22:01 +0800 Subject: [PATCH] 111 --- component/rightItemssecond/index.vue | 169 +++++++++++++---- pages/index/index.vue | 11 +- unpackage/dist/dev/app-plus/app-service.js | 175 ++++++++++++++---- .../dist/dev/app-plus/pages/index/index.css | 40 +++- 4 files changed, 310 insertions(+), 85 deletions(-) diff --git a/component/rightItemssecond/index.vue b/component/rightItemssecond/index.vue index 303af32..6c63ec8 100644 --- a/component/rightItemssecond/index.vue +++ b/component/rightItemssecond/index.vue @@ -48,16 +48,16 @@ - + - - {{item.type}} + + {{item.type}} + :style="isBack?{}:{top:'30rpx'}" :src="`/static/index/cardicons/uplight.png`" /> - - @@ -109,6 +109,15 @@ @touchstart="rulerTouchStart(item1,index0,index1)" @touchend="rulerTouchEnd()" :data-index0="index0" :data-index1="index1"> + + + {{item1.time}} + + + {{item1.type}} + + + {{item1.value}} @@ -188,15 +197,17 @@ const downList = ref() //左下的数组 const rightList = ref([ - "三分段", - "四分段", + // "三分段", + // "四分段", ]) // 方法：根据条件返回不同的类名 const getClass = (item, index0, index1) => { if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1) { return 'super-card-time-card-blue'; - } else if (item.value) { + } else if (item.type==='日常') { return 'super-card-time-card-yellow'; + } else if (item.type) { + return 'super-card-time-card-pouple'; } return 'super-card-time-card'; } @@ -215,12 +226,12 @@ { url: '/static/index/doctorsay/light/clean.png', targetUrl: '/static/index/doctorsay/dark/clean.png', name: '清洁' }, { url: '/static/index/doctorsay/light/drink.png', targetUrl: '/static/index/doctorsay/dark/drink.png', name: '饮食' }, { url: '/static/index/doctorsay/light/bed.png', targetUrl: '/static/index/doctorsay/dark/bed.png', name: '睡眠' }, - { url: '/static/index/doctorsay/light/shi.png', targetUrl: '/static/index/doctorsay/dark/shi.png', name: '排便' }, + { url: '/static/index/doctorsay/light/shi.png', targetUrl: '/static/index/doctorsay/dark/shi.png', name: '排泻' }, { url: '/static/index/doctorsay/light/use.png', targetUrl: '/static/index/doctorsay/dark/use.png', name: '日常' }, ]); // 当前选中的菜单索引 - const rightListIndex = ref(0); + const rightListIndex = ref(1); const undermenuIndex = ref(0); const upmenuIndex = ref(0); const downmenuIndex = ref(999); @@ -229,7 +240,7 @@ const underFans = ref(false); // 当前选中的菜单索引 const roomTar = ref([]); - const emit = defineEmits(['darkchange', 'savename']); + const emit = defineEmits(['darkchange', 'savename','closename']); // 暗黑模式改变 const darkFanschange = () => { emit('darkchange', !props.darkFans); @@ -276,31 +287,68 @@ timer.value = null; } } + const longPressTimer = ref(null); + const isScrolling = ref(false) + //长按计时器 + let scrollTimeout = null + + function handleScroll(e) { + isScrolling.value = true + // 清除之前的定时器 + if (scrollTimeout) clearTimeout(scrollTimeout) + // 设置新的定时器 + scrollTimeout = setTimeout(() => { + isScrolling.value = false; + }, 400) + } + const isBack = ref(false) //左下菜单长按开始 const handleTouchStart = (item : string, index : number) => { - downmenuIndex.value = index - const reldata = [] - const query = uni.createSelectorQuery(); - query.selectAll('.super-card-time-card').boundingClientRect((data : any) => { - data.forEach((res : any) => { - if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { - reldata.push(res) - } - }) + //执行方法 + longPressTimer.value = setTimeout(() => { + if (isScrolling.value) return + isBack.value = true; + downmenuIndex.value = index + const reldata = [] + const query = uni.createSelectorQuery(); + query.selectAll('.super-card-time-card').boundingClientRect((data : any) => { + data.forEach((res : any) => { + if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { + reldata.push(res) + } + }) - }).exec(); - query.selectAll('.super-card-time-card-yellow').boundingClientRect((data : any) => { - data.forEach((res : any) => { - if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { - reldata.push(res) - } - }) + }).exec(); + query.selectAll('.super-card-time-card-yellow').boundingClientRect((data : any) => { + data.forEach((res : any) => { + if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { + reldata.push(res) + } + }) - }).exec(); - emit('savename', item, reldata); + }).exec(); + query.selectAll('.super-card-time-card-pouple').boundingClientRect((data : any) => { + data.forEach((res : any) => { + if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { + reldata.push(res) + } + }) + + }).exec(); + emit('savename', item, reldata); + // 如果触发了长按，也可以考虑设置一个标记，防止后续重复触发 + }, 200) + + } + const handleTouchEnd = () => { + if (longPressTimer.value) { + clearTimeout(longPressTimer.value) + longPressTimer.value = null + } } //表格拖动结束 const rulerEnd = async (res : any) => { + isBack.value = false; if (props.liang.index0 !== 999 && res) { timearr.value[props.liang.index0].children[props.liang.index1].value = res; // 检查是否有任意一个对象的 children 数组最后一个对象的 value 有值 @@ -453,8 +501,16 @@ { time: '09', children: [ - { value: '' }, - { value: '' }, + { + value: '四肢清洁', + type: '日常', + time: '9:00-9:30', + }, + { + value: '指甲', + type: '周一', + time: '9:00-9:33', + }, { value: '' }, { value: '' }, { value: '' }, @@ -1056,20 +1112,19 @@ height: 80rpx; width: 100rpx; border-right: 1rpx solid #BFBFCB; + font-weight: 700; } .super-card-time-und { display: flex; justify-content: center; align-items: center; - // height: 80rpx; width: 100rpx; flex-direction: column; border-right: 1rpx solid #BFBFCB; } .super-card-time-card { - display: flex; justify-content: center; align-items: center; @@ -1077,28 +1132,42 @@ width: calc(100%); border-right: 1rpx solid #BFBFCB; border-top: 1rpx solid #BFBFCB; + flex-direction: column; } .super-card-time-card-blue { background-color: #3FA9F5; display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; height: 140rpx; width: calc(100%); border-right: 1rpx solid #BFBFCB; border-top: 1rpx solid #BFBFCB; + flex-direction: column; } .super-card-time-card-yellow { - background-color: #FFDBA1; + background-color: rgb(255, 250, 241); display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; height: 140rpx; width: calc(100%); border-right: 1rpx solid #BFBFCB; border-top: 1rpx solid #BFBFCB; + flex-direction: column; + } + .super-card-time-card-pouple { + background-color: rgb(224,218,255); + display: flex; + justify-content: space-evenly; + align-items: center; + height: 140rpx; + width: calc(100%); + border-right: 1rpx solid #BFBFCB; + border-top: 1rpx solid #BFBFCB; + flex-direction: column; } } @@ -1180,7 +1249,7 @@ justify-content: center; align-items: center; height: 85rpx; - + // overflow: hidden; position: relative; @@ -1194,6 +1263,7 @@ display: flex; justify-content: center; align-items: center; + text-align: center; font-size: 45rpx; transition: all 0.4s ease-in-out; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); @@ -1210,6 +1280,7 @@ display: flex; justify-content: center; align-items: center; + text-align: center; transition: all 0.4s ease-in-out; font-weight: 500; font-size: 30rpx; @@ -1232,6 +1303,7 @@ width: 250rpx; height: 50rpx; z-index: 21; + transition: all 0.4s ease-in-out; } } } @@ -1292,7 +1364,7 @@ height: 100%; display: flex; align-items: center; - width: 590rpx; + width: 260rpx; .doctorsay-container-button-father { display: flex; @@ -1510,6 +1582,23 @@ } } + .title-time { + display: flex; + + .title-time-time { + font-size: 35rpx; + margin-right: 10rpx; + } + + .title-time-button { + background-color: #FFC363; + padding: 0 5rpx; + padding-top: 5rpx; + border-radius: 10rpx; + font-size: 25rpx; + } + } + // .popup-overlay { // position: fixed; // top: 0; diff --git a/pages/index/index.vue b/pages/index/index.vue index ffdf176..f6d9fc7 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -23,7 +23,7 @@ - + @@ -99,9 +99,12 @@ }) //全局获得x轴和y轴 const getxyrel = (event) => { + // event.stopPropagation(); + // event.preventDefault(); const touch = event.touches[0]; clientX.value = 2*(Math.floor(touch.clientX) - 100); clientY.value = 2*(Math.floor(touch.clientY) - 55); + // console.log("?????",clientX.value,clientY.value) // 遍历数组，找到点击区域所在的对象 const translateX = Math.floor(touch.clientX) - 50; const translateY = Math.floor(touch.clientY) - 25; @@ -129,6 +132,12 @@ canmove.value = false; fangkuaiValue.value = fangkuai } + //解决拖动bug + const closename = () =>{ + savename.value = ""; + canmove.value = true; + fangkuaiValue.value = [] + } const ruler = ref(null) //结束、禁止滑动 const cleanall = () =>{ diff --git a/unpackage/dist/dev/app-plus/app-service.js b/unpackage/dist/dev/app-plus/app-service.js index 07c0bc4..3ad456b 100644 --- a/unpackage/dist/dev/app-plus/app-service.js +++ b/unpackage/dist/dev/app-plus/app-service.js @@ -2212,7 +2212,7 @@ if (uni.restoreGlobal) { type: Object } }, - emits: ["darkchange", "savename"], + emits: ["darkchange", "savename", "closename"], setup(__props, { expose: __expose, emit: __emit }) { const props = __props; vue.onMounted(() => { @@ -2221,14 +2221,16 @@ if (uni.restoreGlobal) { const scrollTop = vue.ref(0); const downList = vue.ref(); const rightList = vue.ref([ - "三分段", - "四分段" + // "三分段", + // "四分段", ]); const getClass = (item, index0, index1) => { if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1) { return "super-card-time-card-blue"; - } else if (item.value) { + } else if (item.type === "日常") { return "super-card-time-card-yellow"; + } else if (item.type) { + return "super-card-time-card-pouple"; } return "super-card-time-card"; }; @@ -2244,10 +2246,10 @@ if (uni.restoreGlobal) { { url: "/static/index/doctorsay/light/clean.png", targetUrl: "/static/index/doctorsay/dark/clean.png", name: "清洁" }, { url: "/static/index/doctorsay/light/drink.png", targetUrl: "/static/index/doctorsay/dark/drink.png", name: "饮食" }, { url: "/static/index/doctorsay/light/bed.png", targetUrl: "/static/index/doctorsay/dark/bed.png", name: "睡眠" }, - { url: "/static/index/doctorsay/light/shi.png", targetUrl: "/static/index/doctorsay/dark/shi.png", name: "排便" }, + { url: "/static/index/doctorsay/light/shi.png", targetUrl: "/static/index/doctorsay/dark/shi.png", name: "排泻" }, { url: "/static/index/doctorsay/light/use.png", targetUrl: "/static/index/doctorsay/dark/use.png", name: "日常" } ]); - const rightListIndex = vue.ref(0); + const rightListIndex = vue.ref(1); const undermenuIndex = vue.ref(0); const upmenuIndex = vue.ref(0); const downmenuIndex = vue.ref(999); @@ -2292,27 +2294,58 @@ if (uni.restoreGlobal) { timer.value = null; } }; + const longPressTimer = vue.ref(null); + const isScrolling = vue.ref(false); + let scrollTimeout = null; + function handleScroll(e) { + isScrolling.value = true; + if (scrollTimeout) + clearTimeout(scrollTimeout); + scrollTimeout = setTimeout(() => { + isScrolling.value = false; + }, 400); + } + const isBack = vue.ref(false); const handleTouchStart = (item, index) => { - downmenuIndex.value = index; - const reldata = []; - const query = uni.createSelectorQuery(); - query.selectAll(".super-card-time-card").boundingClientRect((data) => { - data.forEach((res) => { - if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { - reldata.push(res); - } - }); - }).exec(); - query.selectAll(".super-card-time-card-yellow").boundingClientRect((data) => { - data.forEach((res) => { - if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { - reldata.push(res); - } - }); - }).exec(); - emit("savename", item, reldata); + longPressTimer.value = setTimeout(() => { + if (isScrolling.value) + return; + isBack.value = true; + downmenuIndex.value = index; + const reldata = []; + const query = uni.createSelectorQuery(); + query.selectAll(".super-card-time-card").boundingClientRect((data) => { + data.forEach((res) => { + if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { + reldata.push(res); + } + }); + }).exec(); + query.selectAll(".super-card-time-card-yellow").boundingClientRect((data) => { + data.forEach((res) => { + if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { + reldata.push(res); + } + }); + }).exec(); + query.selectAll(".super-card-time-card-pouple").boundingClientRect((data) => { + data.forEach((res) => { + if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) { + reldata.push(res); + } + }); + }).exec(); + emit("savename", item, reldata); + }, 200); + }; + const handleTouchEnd = () => { + if (longPressTimer.value) { + clearTimeout(longPressTimer.value); + longPressTimer.value = null; + } }; const rulerEnd = async (res) => { + isBack.value = false; if (props.liang.index0 !== 999 && res) { timearr.value[props.liang.index0].children[props.liang.index1].value = res; const shouldAdd = timearr.value.some((obj) => { @@ -2457,8 +2490,16 @@ if (uni.restoreGlobal) { { time: "09", children: [ - { value: "" }, - { value: "" }, + { + value: "四肢清洁", + type: "日常", + time: "9:00-9:30" + }, + { + value: "指甲", + type: "周一", + time: "9:00-9:33" + }, { value: "" }, { value: "" }, { value: "" }, @@ -3025,7 +3066,11 @@ if (uni.restoreGlobal) { ] } ]; - const __returned__ = { props, scrollTop, downList, rightList, getClass, undericonList, doctorsayList, rightListIndex, undermenuIndex, upmenuIndex, downmenuIndex, underFans, roomTar, emit, darkFanschange, changLeft, changeMenuUnder, rightListClick, timer, elementsInfo, rulerTouchStart, rulerTouchEnd, handleTouchStart, rulerEnd, moveNumber, timearr, bigArray }; + const __returned__ = { props, scrollTop, downList, rightList, getClass, undericonList, doctorsayList, rightListIndex, undermenuIndex, upmenuIndex, downmenuIndex, underFans, roomTar, emit, darkFanschange, changLeft, changeMenuUnder, rightListClick, timer, elementsInfo, rulerTouchStart, rulerTouchEnd, longPressTimer, isScrolling, get scrollTimeout() { + return scrollTimeout; + }, set scrollTimeout(v) { + scrollTimeout = v; + }, handleScroll, isBack, handleTouchStart, handleTouchEnd, rulerEnd, moveNumber, timearr, bigArray }; Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true }); return __returned__; } @@ -3168,32 +3213,43 @@ if (uni.restoreGlobal) { vue.createElementVNode("view", { class: "doctorsay-top" }), vue.createElementVNode("scroll-view", { "scroll-y": $props.canmove, - class: "doctorsay-container-scroll" + class: "doctorsay-container-scroll", + onScroll: $setup.handleScroll }, [ (vue.openBlock(true), vue.createElementBlock( vue.Fragment, null, vue.renderList($setup.downList, (item, index) => { return vue.openBlock(), vue.createElementBlock("view", { key: index }, [ - vue.createElementVNode("view", { class: "doctorsay-container-button" }, [ - vue.createElementVNode("text", { - onTouchstart: vue.withModifiers(($event) => $setup.handleTouchStart(item.type, index), ["stop", "prevent"]), - class: vue.normalizeClass($setup.downmenuIndex === index ? `doctorsay-container-text-target` : `doctorsay-container-text`) - }, vue.toDisplayString(item.type), 43, ["onTouchstart"]), + vue.createElementVNode("view", { + class: "doctorsay-container-button", + onTouchstart: ($event) => $setup.handleTouchStart(item.type, index), + onTouchend: $setup.handleTouchEnd + }, [ + vue.createElementVNode( + "text", + { + class: vue.normalizeClass($setup.downmenuIndex === index ? `doctorsay-container-text-target` : `doctorsay-container-text`), + style: vue.normalizeStyle($setup.isBack ? {} : { width: `220rpx`, height: `75rpx`, fontSize: `30rpx` }) + }, + vue.toDisplayString(item.type), + 7 + /* TEXT, CLASS, STYLE */ + ), vue.withDirectives(vue.createElementVNode("image", { class: "doctorsay-container-button-uplight", + style: vue.normalizeStyle($setup.isBack ? {} : { top: "30rpx" }), src: `/static/index/cardicons/uplight.png` - }, null, 8, ["src"]), [ + }, null, 12, ["src"]), [ [vue.vShow, $setup.downmenuIndex === index] ]) - ]), - vue.createCommentVNode(' ') + ], 40, ["onTouchstart"]) ]); }), 128 /* KEYED_FRAGMENT */ )) - ], 8, ["scroll-y"]), + ], 40, ["scroll-y"]), vue.createElementVNode("view", { class: "doctorsay-top" }) ]) ]), @@ -3291,7 +3347,40 @@ if (uni.restoreGlobal) { onTouchend: _cache[2] || (_cache[2] = ($event) => $setup.rulerTouchEnd()), "data-index0": index0, "data-index1": index1 - }, vue.toDisplayString(item1.value), 43, ["onTouchstart", "data-index0", "data-index1"]) + }, [ + vue.withDirectives(vue.createElementVNode( + "view", + { class: "title-time" }, + [ + vue.createElementVNode( + "view", + { class: "title-time-time" }, + vue.toDisplayString(item1.time), + 1 + /* TEXT */ + ), + vue.createElementVNode( + "view", + { + class: "title-time-button", + style: vue.normalizeStyle(item1.type === "日常" ? { color: `#4A2E00` } : { backgroundColor: `#7B61FF`, color: `#fff` }) + }, + vue.toDisplayString(item1.type), + 5 + /* TEXT, STYLE */ + ) + ], + 512 + /* NEED_PATCH */ + ), [ + [vue.vShow, item1.time] + ]), + vue.createTextVNode( + " " + vue.toDisplayString(item1.value), + 1 + /* TEXT */ + ) + ], 42, ["onTouchstart", "data-index0", "data-index1"]) ]); }), 128 @@ -3471,6 +3560,11 @@ if (uni.restoreGlobal) { canmove.value = false; fangkuaiValue.value = fangkuai; }; + const closename = () => { + savename.value = ""; + canmove.value = true; + fangkuaiValue.value = []; + }; const ruler = vue.ref(null); const cleanall = () => { var _a; @@ -3499,7 +3593,7 @@ if (uni.restoreGlobal) { changeMenu(menuIndex.value); }, 50); }); - const __returned__ = { iconList, menuIndex, menuIndexshow, menuIndexshowsecond, darkFans, roomTar, firstcurrentIndex, firstcurrentIndexup, secondcurrentIndexup, secondcurrentIndex, thirdcurrentIndex, darkchange, changeMenu, clientX, clientY, savename, canmove, indexNumber, getxyrel, getxy, fangkuaiValue, openname, ruler, cleanall, throttle, rightItemsfirst, rightItemssecond }; + const __returned__ = { iconList, menuIndex, menuIndexshow, menuIndexshowsecond, darkFans, roomTar, firstcurrentIndex, firstcurrentIndexup, secondcurrentIndexup, secondcurrentIndex, thirdcurrentIndex, darkchange, changeMenu, clientX, clientY, savename, canmove, indexNumber, getxyrel, getxy, fangkuaiValue, openname, closename, ruler, cleanall, throttle, rightItemsfirst, rightItemssecond }; Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true }); return __returned__; } @@ -3593,7 +3687,8 @@ if (uni.restoreGlobal) { canmove: $setup.canmove, darkFans: $setup.darkFans, onDarkchange: $setup.darkchange, - onSavename: $setup.openname + onSavename: $setup.openname, + onCleanname: $setup.closename }, null, 8, ["liang", "isshow", "canmove", "darkFans"]), [ [vue.vShow, $setup.menuIndex == 1] ]) diff --git a/unpackage/dist/dev/app-plus/pages/index/index.css b/unpackage/dist/dev/app-plus/pages/index/index.css index b1382c0..fd98dfb 100644 --- a/unpackage/dist/dev/app-plus/pages/index/index.css +++ b/unpackage/dist/dev/app-plus/pages/index/index.css @@ -3345,6 +3345,7 @@ height: 2.5rem; width: 3.125rem; border-right: 0.03125rem solid #BFBFCB; + font-weight: 700; } .super-card .super-card-time-und[data-v-337bb5da] { display: flex; @@ -3362,26 +3363,40 @@ width: calc(100%); border-right: 0.03125rem solid #BFBFCB; border-top: 0.03125rem solid #BFBFCB; + flex-direction: column; } .super-card .super-card-time-card-blue[data-v-337bb5da] { background-color: #3FA9F5; display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; height: 4.375rem; width: calc(100%); border-right: 0.03125rem solid #BFBFCB; border-top: 0.03125rem solid #BFBFCB; + flex-direction: column; } .super-card .super-card-time-card-yellow[data-v-337bb5da] { - background-color: #FFDBA1; + background-color: #fffaf1; display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; height: 4.375rem; width: calc(100%); border-right: 0.03125rem solid #BFBFCB; border-top: 0.03125rem solid #BFBFCB; + flex-direction: column; +} +.super-card .super-card-time-card-pouple[data-v-337bb5da] { + background-color: #e0daff; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 4.375rem; + width: calc(100%); + border-right: 0.03125rem solid #BFBFCB; + border-top: 0.03125rem solid #BFBFCB; + flex-direction: column; } .right-container[data-v-337bb5da] { width: calc(100% - 7.34375rem); @@ -3466,6 +3481,7 @@ display: flex; justify-content: center; align-items: center; + text-align: center; font-size: 1.40625rem; transition: all 0.4s ease-in-out; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); @@ -3481,6 +3497,7 @@ display: flex; justify-content: center; align-items: center; + text-align: center; transition: all 0.4s ease-in-out; font-weight: 500; font-size: 0.9375rem; @@ -3501,6 +3518,7 @@ width: 7.8125rem; height: 1.5625rem; z-index: 21; + transition: all 0.4s ease-in-out; } .right-container .doctorsay-container-view .doctorsay-container-container[data-v-337bb5da] { width: 54.0625rem; @@ -3548,7 +3566,7 @@ height: 100%; display: flex; align-items: center; - width: 18.4375rem; + width: 8.125rem; } .right-container .doctorsay-container-view .doctorsay-container-container .doctorsay-container-title .doctorsay-container-right .doctorsay-container-button-father[data-v-337bb5da] { display: flex; @@ -3730,6 +3748,20 @@ font-weight: 800; color: white; } +.title-time[data-v-337bb5da] { + display: flex; +} +.title-time .title-time-time[data-v-337bb5da] { + font-size: 1.09375rem; + margin-right: 0.3125rem; +} +.title-time .title-time-button[data-v-337bb5da] { + background-color: #FFC363; + padding: 0 0.15625rem; + padding-top: 0.15625rem; + border-radius: 0.3125rem; + font-size: 0.78125rem; +} .backgroundContainer[data-v-1cf27b2a] { display: flex;