feat: 按照 Pixso 导出的 Vue3 设计稿更新界面
设计稿: vue/vue3/src/views/Frame21.vue 精确还原设计: - 背景: #0D1117 - 标题栏: #153962, 高度 60px - 左侧面板: 560×400, #161B22, 圆角10px, 边框 #30363D - 右侧面板: 200×400, 位置 (590, 70), 同上样式 - 设置重量: 青色 #01EB9B, 字号 40px - 启动按钮: #3FB950, 159×190, 圆角 20px - 减/加按钮: #2A2828, 80×80, 圆角 20px - 状态文字: #F76F4A (红色)
This commit is contained in:
+76
-91
@@ -13,20 +13,23 @@ static lv_obj_t *weight_label = NULL;
|
||||
static lv_obj_t *count_label = NULL;
|
||||
static lv_obj_t *status_label = NULL;
|
||||
static lv_obj_t *set_weight_label = NULL;
|
||||
static lv_obj_t *minus_btn = NULL;
|
||||
static lv_obj_t *plus_btn = NULL;
|
||||
|
||||
static lv_color_t COLOR_HEADER_BG = lv_color_hex(0x1E40AF); // 深蓝色标题栏
|
||||
static lv_color_t COLOR_BG = lv_color_hex(0x111827); // 深色背景
|
||||
static lv_color_t COLOR_CARD = lv_color_hex(0x1F2937); // 卡片背景
|
||||
static lv_color_t COLOR_TEXT = lv_color_hex(0xF9FAFB); // 白色文字
|
||||
static lv_color_t COLOR_TEXT_DIM = lv_color_hex(0x9CA3AF); // 灰色文字
|
||||
static lv_color_t COLOR_GREEN = lv_color_hex(0x10B981); // 绿色（启动按钮、数值）
|
||||
static lv_color_t COLOR_RED = lv_color_hex(0xE53935); // 红色（停止状态）
|
||||
static lv_color_t COLOR_BLUE = lv_color_hex(0x3B82F6); // 蓝色边框
|
||||
static lv_color_t COLOR_BUTTON_DARK = lv_color_hex(0x374151); // 深色按钮
|
||||
static lv_color_t COLOR_HEADER_BG = lv_color_hex(0x153962);
|
||||
static lv_color_t COLOR_BG = lv_color_hex(0x0D1117);
|
||||
static lv_color_t COLOR_CARD = lv_color_hex(0x161B22);
|
||||
static lv_color_t COLOR_TEXT = lv_color_hex(0xFFFFFF);
|
||||
static lv_color_t COLOR_TEXT_DIM = lv_color_hex(0xFFFFFF);
|
||||
static lv_color_t COLOR_GREEN = lv_color_hex(0x3FB950);
|
||||
static lv_color_t COLOR_GREEN_BRIGHT = lv_color_hex(0x01EB9B);
|
||||
static lv_color_t COLOR_RED = lv_color_hex(0xF76F4A);
|
||||
static lv_color_t COLOR_BORDER = lv_color_hex(0x30363D);
|
||||
static lv_color_t COLOR_BUTTON_DARK = lv_color_hex(0x2A2828);
|
||||
|
||||
static bool is_running = false;
|
||||
static uint32_t target_weight = 200; // 目标重量 2.0g（设计稿显示20g）
|
||||
static uint32_t pack_count = 200; // 包装计数
|
||||
static uint32_t target_weight = 200;
|
||||
static uint32_t pack_count = 200;
|
||||
|
||||
static void start_stop_cb(lv_event_t *e);
|
||||
static void weight_dec_cb(lv_event_t *e);
|
||||
@@ -39,121 +42,107 @@ RetCode packer_ui_create(void)
|
||||
lv_obj_set_style_bg_color(packer_scr, COLOR_BG, 0);
|
||||
lv_obj_set_size(packer_scr, 800, 480);
|
||||
|
||||
// 顶部标题栏
|
||||
header = lv_obj_create(packer_scr);
|
||||
lv_obj_set_size(header, 800, 50);
|
||||
lv_obj_set_size(header, 800, 60);
|
||||
lv_obj_set_pos(header, 0, 0);
|
||||
lv_obj_set_style_bg_color(header, COLOR_HEADER_BG, 0);
|
||||
lv_obj_set_style_radius(header, 0, 0);
|
||||
|
||||
lv_obj_t *title_label = lv_label_create(header);
|
||||
lv_label_set_text(title_label, "主界面");
|
||||
lv_obj_set_style_text_font(title_label, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(title_label, COLOR_TEXT, 0);
|
||||
lv_obj_center(title_label);
|
||||
|
||||
// 左侧重量设置面板
|
||||
weight_panel = lv_obj_create(packer_scr);
|
||||
lv_obj_set_size(weight_panel, 550, 420);
|
||||
lv_obj_set_pos(weight_panel, 10, 60);
|
||||
lv_obj_set_size(weight_panel, 560, 400);
|
||||
lv_obj_set_pos(weight_panel, 10, 70);
|
||||
lv_obj_set_style_bg_color(weight_panel, COLOR_CARD, 0);
|
||||
lv_obj_set_style_radius(weight_panel, 8, 0);
|
||||
lv_obj_set_style_radius(weight_panel, 10, 0);
|
||||
lv_obj_set_style_border_width(weight_panel, 2, 0);
|
||||
lv_obj_set_style_border_color(weight_panel, COLOR_BLUE, 0);
|
||||
lv_obj_set_style_border_color(weight_panel, COLOR_BORDER, 0);
|
||||
|
||||
// 设置重量标题
|
||||
lv_obj_t *set_weight_title = lv_label_create(weight_panel);
|
||||
lv_label_set_text(set_weight_title, "设置重量");
|
||||
lv_obj_set_style_text_font(set_weight_title, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(set_weight_title, COLOR_TEXT_DIM, 0);
|
||||
lv_obj_set_pos(set_weight_title, 20, 20);
|
||||
lv_obj_set_style_text_color(set_weight_title, COLOR_TEXT, 0);
|
||||
lv_obj_set_pos(set_weight_title, 39, 101);
|
||||
|
||||
// 设置重量数值
|
||||
set_weight_label = lv_label_create(weight_panel);
|
||||
char weight_str[20];
|
||||
snprintf(weight_str, sizeof(weight_str), "%lu g", target_weight / 10);
|
||||
snprintf(weight_str, sizeof(weight_str), "%lug", target_weight / 10);
|
||||
lv_label_set_text(set_weight_label, weight_str);
|
||||
lv_obj_set_style_text_font(set_weight_label, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(set_weight_label, COLOR_GREEN, 0);
|
||||
lv_obj_set_pos(set_weight_label, 120, 15);
|
||||
lv_obj_set_style_text_color(set_weight_label, COLOR_GREEN_BRIGHT, 0);
|
||||
lv_obj_set_pos(set_weight_label, 239, 101);
|
||||
|
||||
// 减号按钮
|
||||
lv_obj_t *dec_btn = lv_obj_create(weight_panel);
|
||||
lv_obj_set_size(dec_btn, 50, 50);
|
||||
lv_obj_set_pos(dec_btn, 440, 10);
|
||||
lv_obj_set_style_bg_color(dec_btn, COLOR_BUTTON_DARK, 0);
|
||||
lv_obj_set_style_radius(dec_btn, 8, 0);
|
||||
lv_obj_add_event_cb(dec_btn, weight_dec_cb, LV_EVENT_CLICKED, NULL);
|
||||
minus_btn = lv_obj_create(weight_panel);
|
||||
lv_obj_set_size(minus_btn, 80, 80);
|
||||
lv_obj_set_pos(minus_btn, 350, 89);
|
||||
lv_obj_set_style_bg_color(minus_btn, COLOR_BUTTON_DARK, 0);
|
||||
lv_obj_set_style_radius(minus_btn, 20, 0);
|
||||
lv_obj_add_event_cb(minus_btn, weight_dec_cb, LV_EVENT_CLICKED, NULL);
|
||||
|
||||
lv_obj_t *dec_label = lv_label_create(dec_btn);
|
||||
lv_label_set_text(dec_label, "-");
|
||||
lv_obj_set_style_text_font(dec_label, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(dec_label, COLOR_TEXT, 0);
|
||||
lv_obj_center(dec_label);
|
||||
lv_obj_t *minus_line = lv_obj_create(minus_btn);
|
||||
lv_obj_set_size(minus_line, 40, 5);
|
||||
lv_obj_set_style_bg_color(minus_line, COLOR_TEXT, 0);
|
||||
lv_obj_align(minus_line, LV_ALIGN_CENTER, 0, 0);
|
||||
|
||||
// 加号按钮
|
||||
lv_obj_t *inc_btn = lv_obj_create(weight_panel);
|
||||
lv_obj_set_size(inc_btn, 50, 50);
|
||||
lv_obj_set_pos(inc_btn, 500, 10);
|
||||
lv_obj_set_style_bg_color(inc_btn, COLOR_BUTTON_DARK, 0);
|
||||
lv_obj_set_style_radius(inc_btn, 8, 0);
|
||||
lv_obj_add_event_cb(inc_btn, weight_inc_cb, LV_EVENT_CLICKED, NULL);
|
||||
plus_btn = lv_obj_create(weight_panel);
|
||||
lv_obj_set_size(plus_btn, 80, 80);
|
||||
lv_obj_set_pos(plus_btn, 470, 90);
|
||||
lv_obj_set_style_bg_color(plus_btn, COLOR_BUTTON_DARK, 0);
|
||||
lv_obj_set_style_radius(plus_btn, 20, 0);
|
||||
lv_obj_add_event_cb(plus_btn, weight_inc_cb, LV_EVENT_CLICKED, NULL);
|
||||
|
||||
lv_obj_t *inc_label = lv_label_create(inc_btn);
|
||||
lv_label_set_text(inc_label, "+");
|
||||
lv_obj_set_style_text_font(inc_label, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(inc_label, COLOR_TEXT, 0);
|
||||
lv_obj_center(inc_label);
|
||||
lv_obj_t *plus_h_line = lv_obj_create(plus_btn);
|
||||
lv_obj_set_size(plus_h_line, 40, 5);
|
||||
lv_obj_set_style_bg_color(plus_h_line, COLOR_TEXT, 0);
|
||||
lv_obj_align(plus_h_line, LV_ALIGN_CENTER, 0, 0);
|
||||
|
||||
lv_obj_t *plus_v_line = lv_obj_create(plus_btn);
|
||||
lv_obj_set_size(plus_v_line, 5, 40);
|
||||
lv_obj_set_style_bg_color(plus_v_line, COLOR_TEXT, 0);
|
||||
lv_obj_align(plus_v_line, LV_ALIGN_CENTER, 0, 0);
|
||||
|
||||
// 右侧控制面板
|
||||
control_panel = lv_obj_create(packer_scr);
|
||||
lv_obj_set_size(control_panel, 220, 420);
|
||||
lv_obj_set_pos(control_panel, 570, 60);
|
||||
lv_obj_set_size(control_panel, 200, 400);
|
||||
lv_obj_set_pos(control_panel, 590, 70);
|
||||
lv_obj_set_style_bg_color(control_panel, COLOR_CARD, 0);
|
||||
lv_obj_set_style_radius(control_panel, 8, 0);
|
||||
lv_obj_set_style_border_width(control_panel, 1, 0);
|
||||
lv_obj_set_style_border_color(control_panel, lv_color_hex(0x374151), 0);
|
||||
lv_obj_set_style_pad_all(control_panel, 15, 0);
|
||||
lv_obj_set_style_radius(control_panel, 10, 0);
|
||||
lv_obj_set_style_border_width(control_panel, 2, 0);
|
||||
lv_obj_set_style_border_color(control_panel, COLOR_BORDER, 0);
|
||||
|
||||
// 启动按钮
|
||||
start_btn = lv_obj_create(control_panel);
|
||||
lv_obj_set_size(start_btn, 190, 120);
|
||||
lv_obj_set_pos(start_btn, 0, 0);
|
||||
lv_obj_set_size(start_btn, 159, 190);
|
||||
lv_obj_set_pos(start_btn, 610 - 590, 90 - 70);
|
||||
lv_obj_set_style_bg_color(start_btn, COLOR_GREEN, 0);
|
||||
lv_obj_set_style_radius(start_btn, 12, 0);
|
||||
lv_obj_set_style_radius(start_btn, 20, 0);
|
||||
lv_obj_add_event_cb(start_btn, start_stop_cb, LV_EVENT_CLICKED, NULL);
|
||||
|
||||
lv_obj_t *btn_label = lv_label_create(start_btn);
|
||||
lv_label_set_text(btn_label, "启动");
|
||||
lv_obj_set_style_text_font(btn_label, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(btn_label, lv_color_hex(0xFFFFFF), 0);
|
||||
lv_obj_center(btn_label);
|
||||
lv_obj_set_style_text_color(btn_label, COLOR_TEXT, 0);
|
||||
lv_obj_align(btn_label, LV_ALIGN_TOP_MID, 0, 73);
|
||||
|
||||
lv_obj_t *btn_hint = lv_label_create(start_btn);
|
||||
lv_label_set_text(btn_hint, "点击启动");
|
||||
lv_obj_set_style_text_font(btn_hint, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(btn_hint, lv_color_hex(0xFFFFFF), 0);
|
||||
lv_obj_align_to(btn_hint, btn_label, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
|
||||
lv_obj_set_style_text_color(btn_hint, COLOR_TEXT, 0);
|
||||
lv_obj_align(btn_hint, LV_ALIGN_TOP_MID, 0, 160);
|
||||
|
||||
// 当前重量
|
||||
lv_obj_t *weight_title = lv_label_create(control_panel);
|
||||
lv_label_set_text(weight_title, "当前重量");
|
||||
lv_obj_set_style_text_font(weight_title, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(weight_title, COLOR_TEXT_DIM, 0);
|
||||
lv_obj_set_pos(weight_title, 0, 140);
|
||||
lv_obj_set_style_text_color(weight_title, COLOR_TEXT, 0);
|
||||
lv_obj_set_pos(weight_title, 620 - 590, 288 - 70);
|
||||
|
||||
weight_label = lv_label_create(control_panel);
|
||||
lv_label_set_text(weight_label, "0.0g");
|
||||
lv_obj_set_style_text_font(weight_label, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(weight_label, COLOR_GREEN, 0);
|
||||
lv_obj_set_pos(weight_label, 0, 165);
|
||||
lv_obj_set_pos(weight_label, 620 - 590, 314 - 70);
|
||||
|
||||
// 包装计数
|
||||
lv_obj_t *count_title = lv_label_create(control_panel);
|
||||
lv_label_set_text(count_title, "包装计数");
|
||||
lv_obj_set_style_text_font(count_title, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(count_title, COLOR_TEXT_DIM, 0);
|
||||
lv_obj_set_pos(count_title, 0, 200);
|
||||
lv_obj_set_style_text_color(count_title, COLOR_TEXT, 0);
|
||||
lv_obj_set_pos(count_title, 620 - 590, 350 - 70);
|
||||
|
||||
count_label = lv_label_create(control_panel);
|
||||
char count_str[20];
|
||||
@@ -161,20 +150,19 @@ RetCode packer_ui_create(void)
|
||||
lv_label_set_text(count_label, count_str);
|
||||
lv_obj_set_style_text_font(count_label, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(count_label, COLOR_GREEN, 0);
|
||||
lv_obj_set_pos(count_label, 0, 225);
|
||||
lv_obj_set_pos(count_label, 620 - 590, 370 - 70);
|
||||
|
||||
// 运行状态
|
||||
lv_obj_t *status_title = lv_label_create(control_panel);
|
||||
lv_label_set_text(status_title, "运行状态");
|
||||
lv_obj_set_style_text_font(status_title, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(status_title, COLOR_TEXT_DIM, 0);
|
||||
lv_obj_set_pos(status_title, 0, 260);
|
||||
lv_obj_set_style_text_color(status_title, COLOR_TEXT, 0);
|
||||
lv_obj_set_pos(status_title, 620 - 590, 405 - 70);
|
||||
|
||||
status_label = lv_label_create(control_panel);
|
||||
lv_label_set_text(status_label, "已停止");
|
||||
lv_obj_set_style_text_font(status_label, &custom_cjk_16, 0);
|
||||
lv_obj_set_style_text_color(status_label, COLOR_RED, 0);
|
||||
lv_obj_set_pos(status_label, 0, 285);
|
||||
lv_obj_set_pos(status_label, 618 - 590, 431 - 70);
|
||||
|
||||
lv_scr_load(packer_scr);
|
||||
return RET_OK;
|
||||
@@ -191,10 +179,10 @@ static void weight_dec_cb(lv_event_t *e)
|
||||
{
|
||||
(void)e;
|
||||
if (is_running) return;
|
||||
if (target_weight > 10) { // 最小 0.1g
|
||||
if (target_weight > 10) {
|
||||
target_weight -= 10;
|
||||
char weight_str[20];
|
||||
snprintf(weight_str, sizeof(weight_str), "%lu g", target_weight / 10);
|
||||
snprintf(weight_str, sizeof(weight_str), "%lug", target_weight / 10);
|
||||
lv_label_set_text(set_weight_label, weight_str);
|
||||
}
|
||||
}
|
||||
@@ -203,10 +191,10 @@ static void weight_inc_cb(lv_event_t *e)
|
||||
{
|
||||
(void)e;
|
||||
if (is_running) return;
|
||||
if (target_weight < 1000) { // 最大 10.0g
|
||||
if (target_weight < 1000) {
|
||||
target_weight += 10;
|
||||
char weight_str[20];
|
||||
snprintf(weight_str, sizeof(weight_str), "%lu g", target_weight / 10);
|
||||
snprintf(weight_str, sizeof(weight_str), "%lug", target_weight / 10);
|
||||
lv_label_set_text(set_weight_label, weight_str);
|
||||
}
|
||||
}
|
||||
@@ -228,9 +216,6 @@ static void update_status_display()
|
||||
|
||||
void packer_ui_update(void)
|
||||
{
|
||||
static uint32_t sim_counter = 0;
|
||||
sim_counter++;
|
||||
|
||||
if (is_running) {
|
||||
static uint32_t current_weight = 0;
|
||||
if (current_weight < target_weight) {
|
||||
@@ -242,9 +227,9 @@ void packer_ui_update(void)
|
||||
snprintf(count_str, sizeof(count_str), "%lu", pack_count);
|
||||
lv_label_set_text(count_label, count_str);
|
||||
}
|
||||
|
||||
|
||||
char weight_str[20];
|
||||
snprintf(weight_str, sizeof(weight_str), "%lu.%lu g", current_weight / 10, current_weight % 10);
|
||||
snprintf(weight_str, sizeof(weight_str), "%lu.%lug", current_weight / 10, current_weight % 10);
|
||||
lv_label_set_text(weight_label, weight_str);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,5 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "pixso-vue-template",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.17",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.0",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"typescript": "~5.8.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
window.app = getCurrentInstance();
|
||||
</script>
|
||||
Binary file not shown.
@@ -0,0 +1,3 @@
|
||||
@font-face {
|
||||
font-family: "Noto Sans SC-Regular"; font-style: normal; src: url('@/assets/fonts/NotoSansSC-VariableFont_wght_2.ttf')
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol,ul,menu {
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol li::marker, ul li::before {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.scroll-container > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Pixso-canvas-0_1 > div {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import './assets/styles/font.css';
|
||||
import './assets/styles/global.css'
|
||||
import { createApp } from 'vue'
|
||||
import './styles.css'
|
||||
import './assets/styles/font.css'
|
||||
import App from './App.vue'
|
||||
import { router } from './router'
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
app: any;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
|
||||
import { createRouter, createWebHistory , type RouteRecordRaw } from "vue-router";
|
||||
|
||||
const routes: RouteRecordRaw[] = [{path: "/", name: "Frame21", component: () => import("@/views/Frame21.vue"), meta: { guid: "2:1" }},];
|
||||
|
||||
const routePathMap = new Map<string, string>();
|
||||
|
||||
export const getRoutePathByGuid = (guid: string) => {
|
||||
if (!guid) return;
|
||||
if (routePathMap.has(guid)) return routePathMap.get(guid);
|
||||
|
||||
const route = routes.find((item) => item.meta?.guid === guid);
|
||||
if (!route) return;
|
||||
routePathMap.set(guid, route.path);
|
||||
|
||||
return route.path;
|
||||
}
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="scroll-container">
|
||||
<div id="2_1" class="Pixso-frame-2_1">
|
||||
<div id="2_2" class="Pixso-rectangle-2_2"></div>
|
||||
<div id="2_3" class="Pixso-rectangle-2_3"></div>
|
||||
<div id="2_4" class="stroke-wrapper-2_4">
|
||||
<div class="Pixso-rectangle-2_4"></div>
|
||||
<div class="stroke-2_4"></div>
|
||||
</div>
|
||||
<div id="2_5" class="stroke-wrapper-2_5">
|
||||
<div class="Pixso-rectangle-2_5"></div>
|
||||
<div class="stroke-2_5"></div>
|
||||
</div>
|
||||
<div id="2_6" class="Pixso-rectangle-2_6"></div>
|
||||
<p id="2_7" class="Pixso-paragraph-2_7">{{ "包装计数" }}</p>
|
||||
<p id="2_8" class="Pixso-paragraph-2_8">{{ "200" }}</p>
|
||||
<p id="2_10" class="Pixso-paragraph-2_10">{{ "当前重量" }}</p>
|
||||
<p id="2_12" class="Pixso-paragraph-2_12">{{ "0.0g" }}</p>
|
||||
<p id="2_14" class="Pixso-paragraph-2_14">{{ "运行状态" }}</p>
|
||||
<p id="2_16" class="Pixso-paragraph-2_16">{{ "已停止" }}</p>
|
||||
<p id="2_17" class="Pixso-paragraph-2_17">{{ "启动" }}</p>
|
||||
<p id="2_18" class="Pixso-paragraph-2_18">{{ "点击启动" }}</p>
|
||||
<div id="3_1" class="Pixso-rectangle-3_1"></div>
|
||||
<div id="3_2" class="Pixso-rectangle-3_2"></div>
|
||||
<div id="5_3" class="Pixso-rectangle-5_3"></div>
|
||||
<div id="5_4" class="Pixso-rectangle-5_4"></div>
|
||||
<p id="3_3" class="Pixso-paragraph-3_3">{{ "设置重量" }}</p>
|
||||
<p id="3_5" class="Pixso-paragraph-3_5">{{ "20g" }}</p>
|
||||
<div id="3_7" class="Pixso-text-3_7">
|
||||
<p id="3_7_0" class="Pixso-paragraph-3_7_0">{{ " " }}</p>
|
||||
</div>
|
||||
<div id="5_1" class="Pixso-rectangle-5_1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
<style>
|
||||
.scroll-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.Pixso-frame-2_1 {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
background-color: rgba(13, 17, 23, 1);
|
||||
}
|
||||
.Pixso-rectangle-2_2 {
|
||||
width: 800px;
|
||||
height: 480px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background-color: rgba(13, 17, 23, 1);
|
||||
}
|
||||
.Pixso-rectangle-2_3 {
|
||||
width: 800px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background-color: rgba(21, 57, 98, 1);
|
||||
}
|
||||
.Pixso-rectangle-2_4 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
background-color: rgba(22, 27, 34, 1);
|
||||
}
|
||||
.stroke-wrapper-2_4 {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 70px;
|
||||
width: 560px;
|
||||
height: 400px;
|
||||
}
|
||||
.stroke-2_4 {
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
pointer-events: none;
|
||||
border-width: 2px 2px 2px 2px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
border-color: rgba(48, 54, 61, 1);
|
||||
}
|
||||
.Pixso-rectangle-2_5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
background-color: rgba(22, 27, 34, 1);
|
||||
}
|
||||
.stroke-wrapper-2_5 {
|
||||
position: absolute;
|
||||
left: 590px;
|
||||
top: 70px;
|
||||
width: 200px;
|
||||
height: 400px;
|
||||
}
|
||||
.stroke-2_5 {
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
pointer-events: none;
|
||||
border-width: 2px 2px 2px 2px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
border-color: rgba(48, 54, 61, 1);
|
||||
}
|
||||
.Pixso-rectangle-2_6 {
|
||||
width: 159px;
|
||||
height: 190px;
|
||||
position: absolute;
|
||||
left: 610px;
|
||||
top: 90px;
|
||||
border-radius: 20px 20px 20px 20px;
|
||||
background-color: rgba(63, 185, 80, 1);
|
||||
}
|
||||
.Pixso-paragraph-2_7 {
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
top: 350px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-paragraph-2_8 {
|
||||
font-size: 20px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(63, 185, 80, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
top: 370px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-paragraph-2_10 {
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
top: 288px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-paragraph-2_12 {
|
||||
font-size: 20px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(63, 185, 80, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
top: 314px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-paragraph-2_14 {
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
top: 405px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-paragraph-2_16 {
|
||||
font-size: 20px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(247, 111, 74, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 618px;
|
||||
top: 431px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-paragraph-2_17 {
|
||||
font-size: 30px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 659px;
|
||||
top: 163px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-paragraph-2_18 {
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 663px;
|
||||
top: 250px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-rectangle-3_1 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
left: 350px;
|
||||
top: 89px;
|
||||
border-radius: 20px 20px 20px 20px;
|
||||
background-color: rgba(42, 40, 40, 1);
|
||||
}
|
||||
.Pixso-rectangle-3_2 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
left: 470px;
|
||||
top: 90px;
|
||||
border-radius: 20px 20px 20px 20px;
|
||||
background-color: rgba(42, 40, 40, 1);
|
||||
}
|
||||
.Pixso-rectangle-5_3 {
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(calc(-50% + 110px)) translateY(calc(-50% + -110.5px));
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.Pixso-rectangle-5_4 {
|
||||
width: 5px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(calc(-50% + 109.5px)) translateY(calc(-50% + -110px));
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.Pixso-paragraph-3_3 {
|
||||
font-size: 40px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 39px;
|
||||
top: 101px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-paragraph-3_5 {
|
||||
font-size: 40px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: 400;
|
||||
color: rgba(1, 234, 155, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 239px;
|
||||
top: 101px;
|
||||
white-space: pre;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-text-3_7 {
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC-Regular";
|
||||
font-weight: Regular;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 61px;
|
||||
top: 247px;
|
||||
white-space: nowrap;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.Pixso-paragraph-3_7_0 {
|
||||
line-height: 20.27199935913086px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.Pixso-rectangle-5_1 {
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(calc(-50% + -10px)) translateY(calc(-50% + -110.5px));
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
</style>
|
||||
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module "*.vue" {
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
const component: ReturnType<typeof defineComponent>;
|
||||
export default component;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"],
|
||||
},
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': '/src',
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user