Yaxin
/
General-AI-Platform-Web-Client
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 模型列表样式更新

Browse Source
dev-deviceSetting
JINGYJ 1 year ago
parent d39cadd8f3
commit aa61d3e8bf
10 changed files with 177 additions and 3 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/dataScreen/common/dataScreenbg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

21
src/assets/dataScreen/modelList/modelListSide.svg
Unescape Escape View File

@ -0,0 +1,21 @@
<svg width="32" height="872" viewBox="0 0 32 872" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 1L2 35.6269V841.938L27.5 871" stroke="url(#paint0_linear_8858_84300)" stroke-width="3"/>
<path d="M10 36L31 11L30.5 3.5L3 36V166L10 160V36Z" fill="url(#paint1_linear_8858_84300)" stroke="#54DFFE"/>
<path d="M11 841L28.5 861.5L28 869L4 841.215V711L11 717V841Z" fill="url(#paint2_linear_8858_84300)" stroke="#54DFFE"/>
<defs>
<linearGradient id="paint0_linear_8858_84300" x1="16" y1="1" x2="16" y2="871" gradientUnits="userSpaceOnUse">
<stop stop-color="#6AA7FF" stop-opacity="0"/>
<stop offset="0.266666" stop-color="#A1E5FF"/>
<stop offset="0.731666" stop-color="#6AA7FF"/>
<stop offset="0.976666" stop-color="#6AA7FF" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_8858_84300" x1="17" y1="3.5" x2="17" y2="166" gradientUnits="userSpaceOnUse">
<stop stop-color="#249BFF"/>
<stop offset="1" stop-color="#1777F2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_8858_84300" x1="16.25" y1="869" x2="16.25" y2="711" gradientUnits="userSpaceOnUse">
<stop stop-color="#249BFF"/>
<stop offset="1" stop-color="#1777F2" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

83
src/assets/dataScreen/serverList/serverListSide.svg
Unescape Escape View File

@ -0,0 +1,83 @@
<svg width="151" height="855" viewBox="0 0 151 855" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M139.44 852.432C139.44 852.432 58.5545 732.759 44.5894 608.663C43.6767 600.553 47.317 592.661 53.8384 587.754L66.4333 578.277C73.2819 573.124 76.8717 564.724 76.0388 556.193C72.4145 519.074 64.1245 412.855 75.9262 312.013C76.8441 304.171 74.0079 296.33 68.1611 291.023L51.5658 275.96C45.4131 270.375 42.5728 262.088 44.1428 253.929C52.152 212.303 78.3261 81.164 103.61 8.55847" stroke="url(#paint0_linear_8864_88618)" stroke-width="3"/>
<path d="M53.7744 717.207C53.7744 717.207 -40.3506 452.857 50.362 135.225" stroke="url(#paint1_linear_8864_88618)" stroke-width="3"/>
<path d="M106.079 837.027C106.079 837.027 61.9871 753.685 54.8927 729.189" stroke="#1B7FF5" stroke-opacity="0.2" stroke-width="4"/>
<path d="M51.0679 128.378C51.0679 128.378 68.2546 44.4857 86.8984 6.84688" stroke="#1B7FF5" stroke-opacity="0.2" stroke-width="4"/>
<path d="M52.1865 253L46.3138 250.438L46.8596 247.809L52.7324 250.371L52.1865 253Z" fill="url(#paint2_linear_8864_88618)"/>
<path d="M53.1865 248L47.2871 245.433L47.8329 242.803L53.7324 245.371L53.1865 248Z" fill="url(#paint3_linear_8864_88618)"/>
<path d="M54.1865 243L48.2775 240.431L48.8234 237.801L54.7324 240.371L54.1865 243Z" fill="url(#paint4_linear_8864_88618)"/>
<path d="M55.1865 238L49.2649 235.428L49.8108 232.799L55.7324 235.371L55.1865 238Z" fill="url(#paint5_linear_8864_88618)"/>
<path d="M56.7627 232.12L50.4932 229.475L51.0391 226.846L57.3085 229.49L56.7627 232.12Z" fill="url(#paint6_linear_8864_88618)"/>
<path d="M58.1865 226L51.7282 223.317L52.2741 220.687L58.7324 223.371L58.1865 226Z" fill="url(#paint7_linear_8864_88618)"/>
<path d="M59.187 648.687L53.3142 651.249L53.8601 653.878L59.7329 651.317L59.187 648.687Z" fill="url(#paint8_linear_8864_88618)"/>
<path d="M60.187 653.687L54.2876 656.255L54.8334 658.884L60.7329 656.317L60.187 653.687Z" fill="url(#paint9_linear_8864_88618)"/>
<path d="M61.187 658.687L55.278 661.257L55.8239 663.886L61.7329 661.317L61.187 658.687Z" fill="url(#paint10_linear_8864_88618)"/>
<path d="M62.187 663.687L56.2654 666.259L56.8113 668.889L62.7329 666.317L62.187 663.687Z" fill="url(#paint11_linear_8864_88618)"/>
<path d="M63.7632 669.568L57.4937 672.212L58.0396 674.841L64.309 672.197L63.7632 669.568Z" fill="url(#paint12_linear_8864_88618)"/>
<path d="M65.187 675.687L58.7287 678.371L59.2746 681L65.7329 678.317L65.187 675.687Z" fill="url(#paint13_linear_8864_88618)"/>
<path d="M46 427L33 417L33 437L46 427Z" fill="url(#paint14_linear_8864_88618)"/>
<defs>
<linearGradient id="paint0_linear_8864_88618" x1="95.9319" y1="852.432" x2="95.9319" y2="8.55847" gradientUnits="userSpaceOnUse">
<stop stop-color="#1B7FF5" stop-opacity="0"/>
<stop offset="0.48" stop-color="#7CB8FE"/>
<stop offset="1" stop-color="#1B7FF5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_8864_88618" x1="32.3429" y1="717.207" x2="32.3429" y2="135.225" gradientUnits="userSpaceOnUse">
<stop offset="0.015" stop-color="#1B7FF5" stop-opacity="0"/>
<stop offset="0.54" stop-color="#1B7FF5"/>
<stop offset="1" stop-color="#1B7FF5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_8864_88618" x1="49.1165" y1="252.363" x2="49.9296" y2="248.446" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_8864_88618" x1="50.1032" y1="247.36" x2="50.9163" y2="243.443" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_8864_88618" x1="51.0984" y1="242.359" x2="51.9115" y2="238.442" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear_8864_88618" x1="52.0921" y1="237.358" x2="52.9052" y2="233.441" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_8864_88618" x1="53.4944" y1="231.441" x2="54.3074" y2="227.525" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear_8864_88618" x1="54.8238" y1="225.302" x2="55.6368" y2="221.385" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_8864_88618" x1="56.117" y1="649.325" x2="56.9301" y2="653.241" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint9_linear_8864_88618" x1="57.1037" y1="654.327" x2="57.9167" y2="658.244" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear_8864_88618" x1="58.0989" y1="659.328" x2="58.912" y2="663.245" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint11_linear_8864_88618" x1="59.0926" y1="664.33" x2="59.9057" y2="668.246" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint12_linear_8864_88618" x1="60.4948" y1="670.246" x2="61.3079" y2="674.163" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint13_linear_8864_88618" x1="61.8243" y1="676.385" x2="62.6373" y2="680.302" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C2F5"/>
<stop offset="1" stop-color="#49C2F5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint14_linear_8864_88618" x1="46" y1="427" x2="33" y2="427" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#0AFEFF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

12
src/layout/dataScreenIndex.vue
Unescape Escape View File

@ -154,6 +154,18 @@ onBeforeMount(() => {
bottom: 0; bottom: 0;
z-index: 1; z-index: 1;
} }
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url("@/assets/dataScreen/common/dataScreenbg.png") no-repeat;
background-size: cover;
z-index: -999;
opacity: 0.3;
}
} }
.app-mask { .app-mask {

4
src/pages/dataScreen/router/modules/model.ts
Unescape Escape View File

@ -16,6 +16,6 @@ export default {
rank: 4, rank: 4,
roles: ["admin", "common"] roles: ["admin", "common"]
}, },
component: () => import("@/pages/dataScreen/views/device/deviceList.vue"), component: () => import("@/pages/dataScreen/views/modelList/modelList.vue"),
name: "modelList" name: "ModelList"
} as RouteConfigsTable; } as RouteConfigsTable;

2
src/pages/dataScreen/router/modules/serve.ts
Unescape Escape View File

@ -16,6 +16,6 @@ export default {
rank: 3, rank: 3,
roles: ["admin", "common"] roles: ["admin", "common"]
}, },
component: () => import("@/pages/dataScreen/views/device/deviceList.vue"), component: () => import("@/pages/dataScreen/views/serverList/serverList.vue"),
name: "ServerList" name: "ServerList"
} as RouteConfigsTable; } as RouteConfigsTable;

12
src/pages/dataScreen/views/modelList/modelList.scss
Unescape Escape View File

@ -0,0 +1,12 @@
.modelList {
padding: 45px 32px;
.banner_side {
width: 29px;
height: 870px;
background: url("@/assets/dataScreen/modelList/modelListSide.svg") no-repeat
left center;
}
.banner_side_right {
transform: rotateY(180deg);
}
}

17
src/pages/dataScreen/views/modelList/modelList.vue
Unescape Escape View File

@ -0,0 +1,17 @@
<script setup lang="ts">
defineOptions({
name: "ModelList"
});
</script>
<template>
<div class="flex justify-between modelList">
<div class="banner_side" />
<div>mid</div>
<div class="banner_side banner_side_right" />
</div>
</template>
<style lang="scss" scoped>
@import "./modelList.scss";
</style>

12
src/pages/dataScreen/views/serverList/serverList.scss
Unescape Escape View File

@ -0,0 +1,12 @@
.serverList {
padding: 45px 32px;
.banner_side {
width: 151px;
height: 855px;
background: url("@/assets/dataScreen/serverList/serverListSide.svg")
no-repeat left center;
}
.banner_side_right {
transform: rotateY(180deg);
}
}

17
src/pages/dataScreen/views/serverList/serverList.vue
Unescape Escape View File

@ -0,0 +1,17 @@
<script setup lang="ts">
defineOptions({
name: "ServerList"
});
</script>
<template>
<div class="flex justify-between serverList">
<div class="banner_side" />
<div>mid</div>
<div class="banner_side banner_side_right" />
</div>
</template>
<style lang="scss" scoped>
@import "./serverList.scss";
</style>
Write Preview
Loading…
Cancel
Save