yin.wei
/
bigScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 运营管理手术间状态icon更新

Browse Source
main
weiyin 10 months ago
parent 042bd2c86e
commit c6f45e9a27
7 changed files with 129 additions and 23 deletions
Show Stats Download Patch File Download Diff File

1
src/assets/svg/Monitor/TopRight/anesStart.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_20532"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#000AB8" stop-opacity="0.30000001192092896"/><stop offset="99.28571581840515%" stop-color="#2F3AFF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_20968"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#232FFF" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_18972"><stop offset="0%" stop-color="#2531FF" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#0900B3" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_19688"><stop offset="0%" stop-color="#B6BAFF" stop-opacity="0"/><stop offset="100%" stop-color="#2733FF" stop-opacity="1"/></linearGradient><filter id="master_svg4_674_24510" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-2" width="18" height="18"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2" dx="0"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_674_21158"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#111EFF" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_20532)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_20968)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_18972)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_19688)" fill-opacity="1"/></g></g><g filter="url(#master_svg4_674_24510)"><g><path d="M18,15C18,12.24242,15.75758,10,13,10C10.24242,10,8,12.24242,8,15C8,17.75758,10.24242,20,13,20C15.75758,20,18,17.75758,18,15ZM15.32164,14.46903C15.54197,14.596589999999999,15.65579,14.84839,15.62237,15.0886C15.65579,15.32881,15.54197,15.58061,15.32164,15.708169999999999L12.397400000000001,17.52635C12.10952,17.69302,11.73073,17.58696,11.564070000000001,17.29908C11.49379,17.1777,11.472010000000001,17.04016,11.49189,16.90917C11.48726,16.87914,11.48486,16.848399999999998,11.48486,16.81713L11.48486,13.180769999999999L11.48487,13.178C11.48441,13.07538,11.50976,12.97192,11.564070000000001,12.87812C11.73073,12.57509,12.10952,12.48418,12.397400000000001,12.65085L15.32164,14.46903ZM12.69698,14.27455L14.00625,15.0886L12.69698,15.902650000000001L12.69698,14.27455Z" fill-rule="evenodd" fill="url(#master_svg5_674_21158)" fill-opacity="1"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

1
src/assets/svg/Monitor/TopRight/opEnd.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

1
src/assets/svg/Monitor/TopRight/opIndoor.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_15105"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#005AC8" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#2C8BFF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_15691"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="55.714285373687744%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#0A79FF" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_14463"><stop offset="0%" stop-color="#2B8BFF" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#006EB3" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_14503"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#0073FF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg4_674_15843"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#117CFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_674_15843"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#117CFF" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_15105)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_15691)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_14463)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_14503)" fill-opacity="1"/></g></g><g><g><path d="M11.33331,15.49914379814148L8,15.49914379814148L8,14.124133798141479L11.3333,14.124133798141479L11.3333,12.74911379814148L13.33328,14.81162379814148L11.3333,16.87413379814148L11.33331,15.49914379814148Z" fill="url(#master_svg4_674_15843)" fill-opacity="1"/></g><g><path d="M18.00000487701416,10L18.00000487701416,18.9375L14.00005487701416,21L14.00005487701416,18.9375L10.00008487701416,18.9375L10.00008487701416,16.18751L10.66674687701416,16.18751L10.66674687701416,18.25L14.00003487701416,18.25L14.00003487701416,12.06248L16.66668487701416,10.687497L10.66676887701416,10.687497L10.66676887701416,13.43751L10.00010732391416,13.43751L10.00010732391416,10L18.00000487701416,10Z" fill="url(#master_svg5_674_15843)" fill-opacity="1"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

1
src/assets/svg/Monitor/TopRight/opRoom.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_17513"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#008BB6" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#44D3FF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_17853"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#7BE0FF" stop-opacity="0"/><stop offset="100%" stop-color="#0AC5FF" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_16437"><stop offset="0%" stop-color="#08C5FF" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#0083AC" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_16863"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#13C8FF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg4_674_17869"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#35CEFD" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_17513)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_17853)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_16437)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_16863)" fill-opacity="1"/></g></g><g><path d="M9.5,10L8,10L8,19L9.5,19L9.5,10ZM10,10L17,10C17.55228,10,18,10.447715,18,11L18,18C18,18.55229,17.55228,19,17,19L10,19L10,10ZM15,12.11768L13.5,12.11768L13.5,13.70595L12,13.70595L12,15.29419L13.5,15.29419L13.5,16.88238L15,16.88238L15,15.29419L16.5,15.29419L16.5,13.70595L15,13.70595L15,12.11768Z" fill-rule="evenodd" fill="url(#master_svg4_674_17869)" fill-opacity="1"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

1
src/assets/svg/Monitor/TopRight/opStart.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

1
src/assets/svg/Monitor/TopRight/prePlan.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

144
src/views/pageMonitor/topRight/index.vue
Unescape View File

@ -1,16 +1,104 @@
<template> <template>
<div class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border" v-loading="isLoading"> <div
<el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none"> class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border"
v-loading="isLoading"
>
<el-carousel
direction="vertical"
:autoplay="false"
:interval="5000"
indicatorPosition="none"
>
<el-carousel-item v-for="item in opList" :key="item['roomCode']"> <el-carousel-item v-for="item in opList" :key="item['roomCode']">
<section> <section>
<template v-for="(subItem, index) in item"> <template v-for="(subItem, index) in item">
<div class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index"> <div class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
<p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg"> <p
{{ subItem['roomName'] }} class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg"
>
{{ subItem["roomName"] }}
</p> </p>
<div class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh] flex justify-between items-end"> <div
<img src="@/assets/svg/Monitor/TopRight/OpingIcon.svg" /> class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh]"
<span class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap">{{ subItem['operStatusName'] }}</span> >
<div
class="w-full h-full flex justify-between items-center"
v-if="subItem.procStatus == 10"
>
<img
src="@/assets/svg/Monitor/TopRight/opRoom.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#35CEFD] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div>
<div
class="w-full h-full flex justify-between items-center"
v-else-if="subItem.procStatus == 15"
>
<img
src="@/assets/svg/Monitor/TopRight/anesStart.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#424CFE] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div>
<div
class="w-full h-full flex justify-between items-center"
v-else-if="subItem.procStatus == 20"
>
<img
src="@/assets/svg/Monitor/TopRight/OpingIcon.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div>
<div
class="w-full h-full flex justify-between items-center"
v-else-if="subItem.procStatus == 25"
>
<img
src="@/assets/svg/Monitor/TopRight/opEnd.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#BAE7A4] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div>
<div
class="w-full h-full flex justify-between items-center"
v-else-if="subItem.procStatus == 30"
>
<img
src="@/assets/svg/Monitor/TopRight/OpendIcon.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#946FEC] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div>
<div
class="w-full h-full flex justify-between items-center"
v-else
>
<img
src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#0CFFFF] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -21,9 +109,9 @@
</template> </template>
<script> <script>
import { Carousel, CarouselItem } from 'element-ui'; import { Carousel, CarouselItem } from "element-ui";
import { GetMonitorOperationRoomStatus } from '@/api/monitor'; import { GetMonitorOperationRoomStatus } from "@/api/monitor";
import dayjs from 'dayjs'; import dayjs from "dayjs";
export default { export default {
data() { data() {
return { return {
@ -33,19 +121,21 @@ export default {
}, },
methods: { methods: {
onGetPageData() { onGetPageData() {
let nowDay = dayjs().format('YYYY-MM-DD'); let nowDay = dayjs("2024-04-22").format("YYYY-MM-DD");
if (this.$store.getters.isMock) { if (this.$store.getters.isMock) {
nowDay = '2024-06-06'; nowDay = "2024-06-06";
} }
GetMonitorOperationRoomStatus(nowDay).then(res => {
this.formatData(res['data']); GetMonitorOperationRoomStatus(nowDay).then((res) => {
this.formatData(res["data"]);
this.isLoading = false; this.isLoading = false;
}); });
}, },
formatData(pageData) { formatData(pageData) {
console.log("pageData:", pageData);
this.opList = []; this.opList = [];
let group = 0; let group = 0;
for (let i = 0; i < pageData['length']; i++) { for (let i = 0; i < pageData["length"]; i++) {
group = parseInt(i / 21); group = parseInt(i / 21);
if (this.opList[group]) { if (this.opList[group]) {
this.opList[group].push(pageData[i]); this.opList[group].push(pageData[i]);
@ -59,15 +149,15 @@ export default {
this.onGetPageData(); this.onGetPageData();
}, },
components: { components: {
'el-carousel': Carousel, "el-carousel": Carousel,
'el-carousel-item': CarouselItem, "el-carousel-item": CarouselItem,
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bgTopRightBox { .bgTopRightBox {
background-image: url('@/assets/svg/Monitor/TopRight/Box.svg'); background-image: url("@/assets/svg/Monitor/TopRight/Box.svg");
:deep(.el-carousel) { :deep(.el-carousel) {
height: 39.62vh; height: 39.62vh;
.el-carousel__container { .el-carousel__container {
@ -85,23 +175,33 @@ export default {
} }
.ItemBox { .ItemBox {
background-image: url('@/assets/svg/Monitor/TopRight/ItemBox.svg'); background-image: url("@/assets/svg/Monitor/TopRight/ItemBox.svg");
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.PBg { .PBg {
background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, rgba(0, 147, 255, 0.37) 44%, rgba(0, 147, 255, 0) 99%); background: linear-gradient(
90deg,
rgba(0, 147, 255, 0) 0%,
rgba(0, 147, 255, 0.37) 44%,
rgba(0, 147, 255, 0) 99%
);
position: relative; position: relative;
&::after { &::after {
content: ''; content: "";
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, #0093ff 49%, rgba(0, 147, 255, 0) 99%); background: linear-gradient(
90deg,
rgba(0, 147, 255, 0) 0%,
#0093ff 49%,
rgba(0, 147, 255, 0) 99%
);
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save