LiLongLong
/
matrix_spraying_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页入口样式调整

feature/debug
zhangjiming 5 months ago
parent
a8cb0203bf
commit
68c5819a77
7 changed files with 38 additions and 23 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. 1
      src/assets/entry/entry_icon_1.svg
  2. 1
      src/assets/entry/entry_icon_2.svg
  3. 1
      src/assets/entry/entry_icon_3.svg
  4. 1
      src/assets/entry/entry_icon_4.svg
  5. 1
      src/assets/entry/entry_icon_5.svg
  6. 20
      src/components/TemperatureNum.vue
  7. 36
      src/views/HomeView.vue

1
src/assets/entry/entry_icon_1.svg
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="206.99998474121094" height="206" viewBox="0 0 206.99998474121094 206"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1.6576176881790161" id="master_svg0_81_8063"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="99.52375292778015%" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient></defs><g><path d="M190.181,103C190.181,91.4125,196.65,81.1125,207,77.25C201.825,59.225,191.475,42.4875,178.538,29.6125C169.481,36.05,156.544,37.3375,146.194,32.1875C135.844,25.75,130.669,15.45,131.962,3.8625C122.906,1.2875,112.556,0,103.5,0C93.15,0,84.0938,1.2875,75.0375,3.8625C76.3313,14.1625,71.1562,25.75,60.8062,32.1875C50.4563,38.625,37.5187,37.3375,28.4625,29.6125C15.525,42.4875,5.175,59.225,0,77.25C10.35,81.1125,16.8187,91.4125,16.8187,103C16.8187,114.587,10.35,124.887,0,128.75C5.175,146.775,15.525,163.512,28.4625,176.387C37.5187,169.95,50.4563,168.663,60.8062,173.812C71.1562,180.25,76.3313,190.55,75.0375,202.137C84.0938,204.712,94.4438,206,103.5,206C113.85,206,122.906,204.712,131.962,202.137C130.669,191.837,135.844,180.25,146.194,173.812C156.544,167.375,169.481,168.663,178.538,176.387C191.475,163.512,201.825,146.775,207,128.75C196.65,124.887,190.181,114.587,190.181,103ZM103.5,145.488C78.9187,145.488,59.5125,126.175,59.5125,103C59.5125,79.825,78.9187,60.5125,103.5,60.5125C128.081,60.5125,147.487,79.825,147.487,103C147.487,126.175,128.081,145.488,103.5,145.488ZM103.5,128.75C117.79,128.75,129.375,117.221,129.375,103C129.375,88.7787,117.79,77.25,103.5,77.25C89.2096,77.25,77.625,88.7787,77.625,103C77.625,117.221,89.2096,128.75,103.5,128.75Z" fill="url(#master_svg0_81_8063)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

1
src/assets/entry/entry_icon_2.svg
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="117.6129150390625" height="112.18312072753906" viewBox="0 0 117.6129150390625 112.18312072753906"><defs><linearGradient x1="0.5" y1="0" x2="0.5288225256209833" y2="2.2572407201061857" id="master_svg0_81_8397"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient></defs><g><path d="M116.411,35.2212L109.757,28.5356C107.917,26.6831,104.637,26.98,102.431,29.2125L52.3777,79.5981C50.1599,81.8187,49.865,85.12,51.7053,86.9725L58.3469,93.67C60.1872,95.5106,63.4667,95.2137,65.6845,92.9812L115.726,42.6075C117.944,40.375,118.251,37.0737,116.411,35.2212ZM63.3959,99.8806L63.6318,100.083L42.8105,111.15L84.9368,111.15C88.0748,111.15,90.5993,108.597,90.5993,105.45L90.5993,73.0312L64.8587,98.8237C64.3986,99.275,63.8913,99.5363,63.3959,99.8806ZM45.1345,84.1106C45.5474,83.0062,46.1254,81.9256,47.0574,80.9994L90.5993,37.3706L90.5993,5.7C90.5993,2.55312,88.063,0,84.9368,0L5.66245,0C2.53631,0,0,2.55312,0,5.7L0,105.438C0,108.597,2.53631,111.138,5.66245,111.138L33.668,111.138L44.8749,83.8731L45.1345,84.1106ZM14.1561,8.55L73.6119,8.55C76.7498,8.55,79.2744,10.1175,79.2744,12.065C79.2744,14.0125,76.738,15.5681,73.6119,15.5681L14.1561,15.5681C11.03,15.5681,8.49368,14.0006,8.49368,12.065C8.49368,10.1175,11.03,8.55,14.1561,8.55ZM14.1561,27.3244L73.6119,27.3244C76.7498,27.3244,79.2744,28.975,79.2744,31.0056C79.2744,33.0362,76.738,34.6869,73.6119,34.6869L14.1561,34.6869C11.03,34.6869,8.49368,33.0363,8.49368,31.0056C8.49368,28.975,11.03,27.3244,14.1561,27.3244ZM14.1561,54.1263C11.03,54.1263,8.49368,52.4163,8.49368,50.3263C8.49368,48.2363,11.03,46.5263,14.1561,46.5263L50.9621,46.5263C54.0882,46.5263,56.6245,48.2244,56.6245,50.3263C56.6245,52.4281,54.0882,54.1263,50.9621,54.1263L14.1561,54.1263ZM46.149,87.3762L35.4611,112.183L59.2552,99.9756L46.149,87.3762Z" fill="url(#master_svg0_81_8397)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

1
src/assets/entry/entry_icon_3.svg
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="121.625" height="112.9375" viewBox="0 0 121.625 112.9375"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="2.610927104949951" id="master_svg0_81_8912"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient></defs><g><path d="M99.9062,86.875L52.125,86.875C49.726,86.875,47.7812,88.8198,47.7812,91.2188C47.7812,93.6177,49.726,95.5625,52.125,95.5625L99.9062,95.5625C102.305,95.5625,104.25,93.6177,104.25,91.2188C104.25,88.8198,102.305,86.875,99.9062,86.875ZM99.9062,52.125L52.125,52.125C49.726,52.125,47.7812,54.0698,47.7812,56.4688C47.7812,58.8677,49.726,60.8125,52.125,60.8125L99.9062,60.8125C102.305,60.8125,104.25,58.8677,104.25,56.4688C104.25,54.0698,102.305,52.125,99.9062,52.125ZM99.9062,17.375L52.125,17.375C49.726,17.375,47.7812,19.3198,47.7812,21.7188C47.7812,24.1177,49.726,26.0625,52.125,26.0625L99.9062,26.0625C102.305,26.0625,104.25,24.1177,104.25,21.7188C104.25,19.3198,102.305,17.375,99.9062,17.375ZM32.5781,86.875L23.8906,86.875C21.4916,86.875,19.5469,88.8198,19.5469,91.2188C19.5469,93.6177,21.4916,95.5625,23.8906,95.5625L32.5781,95.5625C34.9771,95.5625,36.9219,93.6177,36.9219,91.2188C36.9219,88.8198,34.9771,86.875,32.5781,86.875ZM32.5781,52.125L23.8906,52.125C21.4916,52.125,19.5469,54.0698,19.5469,56.4688C19.5469,58.8677,21.4916,60.8125,23.8906,60.8125L32.5781,60.8125C34.9771,60.8125,36.9219,58.8677,36.9219,56.4688C36.9219,54.0698,34.9771,52.125,32.5781,52.125ZM32.5781,17.375L23.8906,17.375C21.4916,17.375,19.5469,19.3198,19.5469,21.7188C19.5469,24.1177,21.4916,26.0625,23.8906,26.0625L32.5781,26.0625C34.9771,26.0625,36.9219,24.1177,36.9219,21.7188C36.9219,19.3198,34.9771,17.375,32.5781,17.375ZM108.594,0L13.0312,0C5.83429,0,0,5.83429,0,13.0312L0,99.9062C0,107.103,5.83429,112.938,13.0312,112.938L108.594,112.938C115.791,112.938,121.625,107.103,121.625,99.9062L121.625,13.0312C121.625,5.83429,115.791,0,108.594,0ZM112.938,99.9062C112.938,102.305,110.993,104.25,108.594,104.25L13.0312,104.25C10.6323,104.25,8.6875,102.305,8.6875,99.9062L8.6875,78.1875L99.9062,78.1875C102.305,78.1875,104.25,76.2427,104.25,73.8438C104.25,71.4448,102.305,69.5,99.9062,69.5L8.6875,69.5L8.6875,43.4375L99.9062,43.4375C102.305,43.4375,104.25,41.4927,104.25,39.0938C104.25,36.6948,102.305,34.75,99.9062,34.75L8.6875,34.75L8.6875,13.0312C8.6875,10.6323,10.6323,8.6875,13.0312,8.6875L108.594,8.6875C110.993,8.6875,112.938,10.6323,112.938,13.0312L112.938,99.9062Z" fill="url(#master_svg0_81_8912)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

1
src/assets/entry/entry_icon_4.svg
File diff suppressed because it is too large
View File

1
src/assets/entry/entry_icon_5.svg
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="176" height="176" viewBox="0 0 176 176"><defs><clipPath id="master_svg0_81_11938"><rect x="0" y="0" width="176" height="176" rx="0"/></clipPath><linearGradient x1="0.5" y1="0" x2="0.5" y2="2.8220138549804688" id="master_svg1_81_9332"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="98.80946278572083%" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#master_svg0_81_11938)"><g><path d="M121.7107890625,17.99853515625L158.0107890625,54.29853515625L147.6337890625,64.66783515624999L134.6697890625,51.70233515625L124.2987890625,62.07333515625L127.6987890625,65.47383515625L137.2607890625,75.03623515625C137.2777890625,75.05293515625,137.2947890625,75.06963515625,137.31078906250002,75.08643515624999L155.4147890625,93.19083515625L145.0447890625,103.56023515625L132.0757890625,90.59083515625L75.03418906249999,147.62853515625C73.1741890625,149.49053515625,70.45968906249999,150.21253515625,67.9207890625,149.52053515625L46.3886890625,143.64953515625L32.3724890625,157.66653515625L11.6337890625,157.66653515625L13.1517890625,156.14853515625L33.9212890625,135.37853515625L26.4691890625,108.07663515625C25.777989062499998,105.53773515625,26.4999890625,102.82323515625,28.3611890625,100.96323515625L85.4045890625,43.91973515625L72.4450890625,30.96023515625L82.8198890625,20.59269515625L113.9277890625,51.70263515625L124.2997890625,41.33203515625L111.3373890625,28.367835156250003L121.7107890625,17.99853515625ZM82.8198890625,20.59269515625L82.8180890625,20.59086515625L82.8216890625,20.59086515625L82.8198890625,20.59269515625Z" fill-rule="evenodd" fill="url(#master_svg1_81_9332)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M85.409925,64.66796875L106.15232499999999,85.41026875L95.779325,95.78326875L75.036925,75.04096875L85.409925,64.66796875ZM67.259925,82.81796875L82.81762499999999,98.37566875L72.448325,108.74496875L56.890625,93.18726875L67.259925,82.81796875Z" fill="#7FB1F5" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

20
src/components/TemperatureNum.vue
View File

@ -8,16 +8,16 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import N0 from "@/assets/N0.svg";
import N1 from "@/assets/N1.svg";
import N2 from "@/assets/N2.svg";
import N3 from "@/assets/N3.svg";
import N4 from "@/assets/N4.svg";
import N5 from "@/assets/N5.svg";
import N6 from "@/assets/N6.svg";
import N7 from "@/assets/N7.svg";
import N8 from "@/assets/N8.svg";
import N9 from "@/assets/N9.svg";
import N0 from "@/assets/number/N0.svg";
import N1 from "@/assets/number/N1.svg";
import N2 from "@/assets/number/N2.svg";
import N3 from "@/assets/number/N3.svg";
import N4 from "@/assets/number/N4.svg";
import N5 from "@/assets/number/N5.svg";
import N6 from "@/assets/number/N6.svg";
import N7 from "@/assets/number/N7.svg";
import N8 from "@/assets/number/N8.svg";
import N9 from "@/assets/number/N9.svg";
const numImgMap: Record<number, string> = { const numImgMap: Record<number, string> = {
0: N0, 0: N0,

36
src/views/HomeView.vue
View File

@ -1,17 +1,27 @@
<template> <template>
<main class="relative">
<section class="pt-[90px] mb-5 flex justify-between px-[90px]">
<img src="@/assets/entry1.png" alt="entry1" @click="onEnvironmentEntryClick" />
<img src="@/assets/entry2.png" alt="entry1" @click="onSprayEntryClick" />
<img src="@/assets/entry3.png" alt="entry1" @click="onPrintEntryClick" />
</section>
<section class="flex justify-between px-[100px]">
<div class="btn-dark px-12 py-3 text-lg">开始喷涂</div>
<div class="btn-light px-12 py-3 text-lg">停止喷涂</div>
<div class="btn-dark px-12 py-3 text-lg">开始转印</div>
<div class="btn-light px-12 py-3 text-lg">停止转印</div>
</section>
<main class="h-full flex justify-center items-center">
<div class="h-[70%] w-[90%] grid grid-cols-3 grid-rows-2 gap-6 text-white">
<div class="row-span-2 relative bg-[url(@/assets/entry/entry_bg1.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]" @click="onSprayEntryClick">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">喷涂设置</p>
<img src="@/assets/entry/entry_icon_1.svg" alt="icon" class="w-[90px] absolute right-6 top-6" />
</div>
<div class="relative bg-[url(@/assets/entry/entry_bg2.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">历史喷涂</p>
<img src="@/assets/entry/entry_icon_2.svg" alt="icon" class="w-[50px] absolute right-6 top-6" />
</div>
<div class="relative bg-[url(@/assets/entry/entry_bg3.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">工艺管理</p>
<img src="@/assets/entry/entry_icon_3.svg" alt="icon" class="w-[55px] absolute right-6 top-6" />
</div>
<div class="relative bg-[url(@/assets/entry/entry_bg4.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">清洗管道</p>
<img src="@/assets/entry/entry_icon_4.svg" alt="icon" class="w-[50px] absolute right-6 top-6" />
</div>
<div class="relative bg-[url(@/assets/entry/entry_bg5.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">注射器管理</p>
<img src="@/assets/entry/entry_icon_5.svg" alt="icon" class="w-[80px] absolute right-4 top-4" />
</div>
</div>
</main> </main>
</template> </template>

Write Preview
Loading…
Cancel
Save