Browse Source

big card

master
maochaoying 2 years ago
parent
commit
1fea3f3215
  1. 139
      src/components/BigCard.vue
  2. 109
      src/pages/Home.vue

139
src/components/BigCard.vue

@ -1,8 +1,64 @@
<template>
<div class="big_card_container">bigcard</div>
<div class="big_card_container">
<div class="title_wrap">
<h1>流量L/min</h1>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="34.42768096923828"
height="39.86444854736328"
viewBox="0 0 34.42768096923828 39.86444854736328"
>
<defs>
<clipPath id="master_svg0_96_11046">
<rect
x="0"
y="0"
width="34.42768096923828"
height="39.86444854736328"
rx="17.21384048461914"
/>
</clipPath>
</defs>
<g clip-path="url(#master_svg0_96_11046)">
<g>
<path
d="M5.126973125,26.901193359375C6.5094731249999995,30.582193359375,9.211633124999999,33.501993359375,12.618203125,34.995893359375C15.901753125,36.424993359375,19.569853125,36.424993359375,22.853453125,34.995893359375C27.985253125,32.745593359375,31.342553125,27.357393359375,31.342553125,21.371293359375C31.343353125,17.471493359375,29.910353125,13.731093359375,27.358753125,10.973133359375L19.754153125000002,2.804913359375C19.484853125,2.512273359375,19.163353125,2.281645359375,18.809253124999998,2.126951359375C18.121453125000002,1.821940859375,17.350153125,1.821940859375,16.662453125,2.126951359375C16.308253125,2.281645359375,15.986853125,2.512273359375,15.717553125,2.804913359375L13.812573125,4.814293359375C13.221823125,5.452623359375,13.221823125,6.487573359375,13.812573125,7.125903359375C14.403353125,7.764233359375,15.361053125,7.764233359375,15.951853125,7.125903359375L17.735853125,5.198203359375L25.219553125,13.284693359375C29.352953125,17.750693359375,29.352953125,24.991893359375,25.219553125,29.457793359375C24.223253125,30.548793359375,23.032653125,31.410193359375,21.719553125,31.989993359375C19.165153125,33.111493359375004,16.306553125,33.111493359375004,13.752103125,31.989993359375C12.439043125,31.410193359375,11.248413124999999,30.548793359375,10.252153125,29.457793359375C6.118733125,24.991893359375,6.118733125,17.750693359375,10.252153125,13.284693359375L12.157093125,11.234523359375C12.747833125,10.596183359375,12.747833125,9.561243359375,12.157093125,8.922913359375C11.566353125,8.284583359374999,10.608563125,8.284583359374999,10.017823125,8.922913359375L8.112883125,10.973133359375C4.245717125,15.151593359375,3.069533125,21.425893359375,5.126973125,26.901193359375Z"
fill="#15D0A1"
fill-opacity="1"
/>
</g>
<g>
<path
d="M18.28011328125,28.474333515625C17.478471281250002,28.474333515625,16.82861328125,27.794413515625,16.82861328125,26.955683515625C16.82861328125,26.116963515625,17.478471281250002,25.437043515625,18.28011328125,25.437043515625C19.88339328125,25.437043515625,21.18310328125,24.077193515624998,21.18310328125,22.399753515625C21.18310328125,21.561023515625,21.83296328125,20.881103515625,22.63460328125,20.881103515625C23.43624328125,20.881103515625,24.08609328125,21.561023515625,24.08609328125,22.399753515625C24.08609328125,25.754643515625,21.48667328125,28.474333515625,18.28011328125,28.474333515625Z"
fill="#15D0A1"
fill-opacity="1"
/>
</g>
</g>
</svg>
</div>
<div class="number">3.50</div>
<div class="process_wrap">
<div class="progress_wrap">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="progress" :style="{ width: progress + '%' }"></div>
</div>
<div class="scale">
<p>0</p>
<p>10</p>
</div>
</div>
</div>
</template>
<script setup></script>
<script setup>
import { ref } from 'vue'
const progress = ref(40)
</script>
<style lang="scss" scoped>
.big_card_container {
@ -12,5 +68,84 @@
background: #fff;
box-sizing: border-box;
overflow: hidden;
padding: 16px 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.title_wrap {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 36px;
font-weight: 500;
letter-spacing: 0em;
color: #3d3d3d;
width: 100%;
}
.number {
flex: 1;
font-size: 120px;
font-weight: bold;
text-align: right;
letter-spacing: 0em;
color: #15d0a1;
display: flex;
align-items: center;
justify-content: center;
}
.process_wrap {
width: 100%;
.progress_wrap {
width: 100%;
height: 8px;
border-radius: 18px;
background: #d8d8d8;
position: relative;
.dot1 {
position: absolute;
left: 78px;
top: 0;
bottom: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff8c00;
z-index: 99;
}
.dot2 {
position: absolute;
right: 58px;
top: 0;
bottom: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff8c00;
z-index: 99;
}
.progress {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: 18px;
background: #15d0a1;
}
}
.scale {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24px;
font-weight: bold;
letter-spacing: 0em;
color: #3d3d3d;
padding: 0 2px;
box-sizing: border-box;
width: 100%;
margin-top: 8px;
}
}
}
</style>

109
src/pages/Home.vue

@ -13,7 +13,111 @@
<SmallCard />
</div>
<div class="three_line_box">
<div class="bubble_box"></div>
<div class="bubble_box">
<div class="bubble_wrap">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="96"
height="96"
viewBox="0 0 96 96"
>
<defs>
<clipPath id="master_svg0_96_11184">
<rect x="0" y="0" width="96" height="96" rx="0" />
</clipPath>
</defs>
<g clip-path="url(#master_svg0_96_11184)">
<g>
<path
d="M63,24C63,25.59131,63.632142,27.11742,64.75736,28.2426C65.88258,29.367800000000003,67.40869,30,69,30C70.59131,30,72.11742,29.367800000000003,73.2426,28.2426C74.3678,27.11742,75,25.59131,75,24C75,22.40869,74.3678,20.88258,73.2426,19.75736C72.11742,18.632142,70.59131,18.000000000000004,69,18C67.40869,18.000000000000004,65.88258,18.632142,64.75736,19.75736C63.632142,20.88258,63,22.40869,63,24C63,24,63,24,63,24Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M69,48C69,49.59131,69.632142,51.117419999999996,70.75736,52.242599999999996C71.88258,53.3678,73.40869,54,75,54C76.59131,54,78.11742,53.3678,79.2426,52.242599999999996C80.3678,51.117419999999996,81,49.59131,81,48C81,46.40869,80.3678,44.88258,79.2426,43.75736C78.11742,42.632142,76.59131,42,75,42C73.40869,42,71.88258,42.632142,70.75736,43.75736C69.632142,44.88258,69,46.40869,69,48C69,48,69,48,69,48Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M39,55.5C38.9999999709423,56.8789,39.27159,58.2443,39.799263,59.5182C40.32694,60.7921,41.10037,61.949600000000004,42.07538,62.9246C43.05039,63.8996,44.20789,64.6731,45.48181,65.2007C46.75573,65.7284,48.12111,66,49.5,66C50.8789,66,52.2443,65.7284,53.5182,65.2007C54.7921,64.6731,55.949600000000004,63.8996,56.9246,62.9246C57.8996,61.949600000000004,58.673100000000005,60.7921,59.2007,59.5182C59.7284,58.2443,60,56.8789,60,55.5C60,54.12111,59.7284,52.75573,59.2007,51.48181C58.673100000000005,50.20789,57.8996,49.05039,56.9246,48.07538C55.949600000000004,47.10036,54.7921,46.32694,53.5182,45.799263C52.2443,45.27159,50.8789,45,49.5,45C48.12111,45,46.75573,45.27159,45.48181,45.799263C44.20789,46.32694,43.05039,47.10036,42.07538,48.07538C41.10037,49.05039,40.32694,50.20789,39.799263,51.48181C39.27159,52.75573,38.9999999709423,54.12111,39,55.5C39,55.5,39,55.5,39,55.5Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M60,78C60,79.59131,60.632142,81.11742,61.75736,82.2426C62.88258,83.3678,64.40869,84,66,84C67.59131,84,69.11742,83.3678,70.2426,82.2426C71.3678,81.11742,72,79.59131,72,78C72,76.40869,71.3678,74.88258,70.2426,73.75736C69.11742,72.632142,67.59131,72,66,72C64.40869,72,62.88258,72.632142,61.75736,73.75736C60.632142,74.88258,60,76.40869,60,78C60,78,60,78,60,78Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M78,66C78,66.79566,78.316068,67.55871,78.878677,68.1213C79.44129,68.68394,80.20435,69,81,69C81.79566,69,82.55871,68.68394,83.1213,68.1213C83.68394,67.55871,84,66.79566,84,66C84,65.20435,83.68394,64.44129,83.1213,63.878677C82.55871,63.316068,81.79566,63,81,63C80.20435,63,79.44129,63.316068,78.878677,63.878677C78.316068,64.44129,78,65.20435,78,66C78,66,78,66,78,66Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M18,73.5C18.000000000000004,75.48912,18.790176,77.3968,20.1967,78.80330000000001C21.60322,80.2098,23.51088,81,25.5,81C27.48912,81,29.3968,80.2098,30.8033,78.80330000000001C32.2098,77.3968,33,75.48912,33,73.5C33,71.51088,32.2098,69.60322,30.8033,68.19669999999999C29.3968,66.790176,27.48912,66,25.5,66C23.51088,66,21.60322,66.790176,20.1967,68.19669999999999C18.790176,69.60322,18.000000000000004,71.51088,18,73.5C18,73.5,18,73.5,18,73.5Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M12,51C12.000000000000004,52.59131,12.632142,54.117419999999996,13.75736,55.242599999999996C14.88258,56.3678,16.40869,57,18,57C19.59131,57,21.11742,56.3678,22.2426,55.242599999999996C23.3679,54.117419999999996,24,52.59131,24,51C24,49.40869,23.3679,47.88258,22.2426,46.75736C21.11742,45.632142,19.59131,45,18,45C16.40869,45,14.88258,45.632142,13.75736,46.75736C12.632142,47.88258,12.000000000000005,49.40869,12,51C12,51,12,51,12,51Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M27,34.5C27.000000000000004,36.48912,27.790176,38.3968,29.1967,39.8033C30.60322,41.2098,32.51088,42,34.5,42C36.48912,42,38.3968,41.2098,39.8033,39.8033C41.2098,38.3968,42,36.48912,42,34.5C42,32.51088,41.2098,30.60322,39.8033,29.1967C38.3968,27.790176,36.48912,27,34.5,27C32.51088,27,30.60322,27.790176,29.1967,29.1967C27.790176,30.60322,27,32.51088,27,34.5C27,34.5,27,34.5,27,34.5Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M15,22.5C15,23.693469999999998,15.474103,24.838079999999998,16.31802,25.68199C17.161929999999998,26.52591,18.30652,27,19.5,27C20.693469999999998,27,21.838079999999998,26.52591,22.68199,25.68199C23.52591,24.838079999999998,24,23.693469999999998,24,22.5C24,21.30652,23.52591,20.161929999999998,22.68199,19.31802C21.838079999999998,18.474103,20.693469999999998,18,19.5,18C18.30652,18,17.161929999999998,18.474103,16.31802,19.31802C15.474103,20.161929999999998,15,21.30652,15,22.5C15,22.5,15,22.5,15,22.5Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M45,16.5C45.00000000000001,17.693469999999998,45.474103,18.838079999999998,46.31802,19.68199C47.16193,20.52591,48.30652,21,49.5,21C50.69347,21,51.83808,20.52591,52.68199,19.68199C53.525909999999996,18.838079999999998,54,17.693469999999998,54,16.5C54,15.306519999999999,53.525909999999996,14.16193,52.68199,13.31802C51.83808,12.474103,50.69347,12,49.5,12C48.30652,12,47.16193,12.474103,46.31802,13.31802C45.474103,14.16193,45.00000000000001,15.306519999999999,45,16.5C45,16.5,45,16.5,45,16.5Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M42,76.5C42,77.69347,42.474103,78.83808,43.31802,79.68199C44.16193,80.52591,45.30652,81,46.5,81C47.69347,81,48.83808,80.52591,49.68199,79.68199C50.525909999999996,78.83808,51,77.69347,51,76.5C51,75.30652,50.525909999999996,74.16194,49.68199,73.31802C48.83808,72.474107,47.69347,72,46.5,72C45.30652,72,44.16193,72.474107,43.31802,73.31802C42.474103,74.16194,42.00000000000001,75.30652,42,76.5C42,76.5,42,76.5,42,76.5Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
<g>
<path
d="M51,34.5C51,35.69347,51.474107,36.83808,52.31802,37.68199C53.16194,38.525909999999996,54.30652,39,55.5,39C56.69347,39,57.83808,38.525909999999996,58.68199,37.68199C59.525909999999996,36.83808,60,35.69347,60,34.5C60,33.30652,59.525909999999996,32.16193,58.68199,31.31802C57.83808,30.474103,56.69347,30.000000000000004,55.5,30C54.30652,30.000000000000004,53.16194,30.474103,52.31802,31.31802C51.474107,32.16193,51,33.30652,51,34.5C51,34.5,51,34.5,51,34.5Z"
fill="#105CDB"
fill-opacity="1"
/>
</g>
</g>
</svg>
</div>
</div>
<div class="battery_status_box">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -220,6 +324,9 @@ import SmallCard from 'cpns/SmallCard'
display: flex;
align-items: center;
justify-content: center;
.bubble_wrap {
border: dashed 1px #e0e0e0;
}
}
.battery_status_box {
flex: 1;

Loading…
Cancel
Save