123

package.json

@@ -23,11 +23,15 @@
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@unocss/preset-attributify": "66.1.0-beta.10",
+    "@unocss/preset-icons": "66.1.0-beta.10",
+    "@unocss/preset-uno": "66.1.0-beta.10",
     "@vant/auto-import-resolver": "^1.0.2",
     "@vitejs/plugin-vue": "^4.5.2",
     "postcss": "^8.4.33",
     "postcss-px-to-viewport": "^1.1.1",
     "sass": "^1.70.0",
+    "unocss": "66.1.0-beta.10",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.0.8"

src/main.js

@@ -5,7 +5,7 @@ import router from './router';
 import 'normalize.css';
 import 'vant/lib/index.css';
 import { createPinia } from 'pinia';
-
+import 'uno.css'
 const app = createApp(App);
 const pinia = createPinia();
 app.use(pinia);

src/router/index.js

@@ -11,6 +11,11 @@ const routes = [
         meta: { title: '登录' },
         component: () => import('@/views/logon/index.vue')
     },
+    {
+        path: '/workinfo',
+        meta: { title: '工作信息' },
+        component: () => import('@/views/workinfo/index.vue')
+    },
     {
         path: '/page-forward',
         name: 'page-forward',

src/views/workinfo/index.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref } from 'vue';
+const info = ref({
+  title: "家山树几棵",
+  image: "https://e-cdn.fontree.cn/exhibition/prod/default/国展报名/0737054f-b2c7-4c92-8e75-1100faca19da.png",
+  artist: "李甜甜02",
+  size: "2400cmX54656cm",
+  year: "",
+  type: "中国画",
+  material: "宣纸",
+  appreciation: ""
+});
+</script>
+<template>
+    <div class="w-100vw h-100vh flex flex-col overflow-hidden">
+        <div class="w-100vw h-33px">
+            <img src="@/assets/images/20250407155136.png" class="w-100vw object-fill" alt="">
+        </div>
+        <div class="grow-1 flex overflow-hidden">
+            <div class="w-33px h-full shrink-0">
+                <img src="@/assets/images/20250407155213.png" class="w-33px h-full object-fill" alt="">
+            </div>
+            <div
+                class="grow-1 bg-no-repeat  bg-center bg-cover wrap1 overflow-y-auto flex flex-col items-center pt-32px px-26px">
+                <!-- 其他内容 -->
+                <div class="text-20px text-#010101 font-bold mb-22px">{{ info.title }}</div>
+                <div class="bg-[rgba(0,0,0,0.1)] w-255px h-346px mb-13px">
+                    <img :src="info.image" class="object-contain w-full h-full" alt="">
+                </div>
+                <div class="font-bold text-16px mb-45px">{{ info.artist }}</div>
+                <div class="text-12px w-full">
+                    <div class="flex mb-9px">
+                        <div class="font-bold">尺寸：</div>
+                        <div>{{ info.size }}</div>
+                    </div>
+                    <div class="flex mb-9px">
+                        <div class="font-bold">年份：</div>
+                        <div>{{ info.year }}</div>
+                    </div>
+                    <div class="flex mb-9px">
+                        <div class="font-bold">类型：</div>
+                        <div>{{ info.type }}</div>
+                    </div>
+                    <div class="flex mb-5px">
+                        <div class="font-bold">材质：</div>
+                        <div>{{ info.material }}</div>
+                    </div>
+                    <div class="flex mb-9px">
+                        <div class="font-bold whitespace-nowrap translate-y-5px">画作赏析：</div>
+                        <div class="leading-22px">{{ info.appreciation }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="w-33px h-full shrink-0">
+                <img src="@/assets/images/20250407155213.png" class="w-33px h-full object-fill" alt="">
+            </div>
+        </div>
+        <div class="w-100vw h-33px">
+            <img src="@/assets/images/20250407155204.png" class="w-100vw object-fill" alt="">
+        </div>
+    </div>
+</template>
+<style scoped>
+.wrap1 {
+    background-image: url('../../assets/images/20250407155229.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100%;
+    overflow-y: auto;
+}
+</style>

uno.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from 'unocss'
+// 按需导入预设
+import presetUno from '@unocss/preset-uno'
+import presetAttributify from '@unocss/preset-attributify'
+import presetIcons from '@unocss/preset-icons'
+
+export default defineConfig({
+  // 添加预设
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons(),
+  ],
+  // 这里可以添加您的自定义规则
+  rules: [
+    // ...
+  ],
+  // 添加快捷方式
+  shortcuts: {
+    // ...
+  },
+})

vite.config.js

@@ -5,7 +5,7 @@ import Components from 'unplugin-vue-components/vite';
 import { VantResolver } from '@vant/auto-import-resolver';
 import { VarletUIResolver } from 'unplugin-vue-components/resolvers'
 import autoImport from 'unplugin-auto-import/vite'
-
+import UnoCSS from 'unocss/vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   server:{
@@ -22,5 +22,5 @@ export default defineConfig({
     resolvers: [VarletUIResolver(),  autoImport({
       resolvers: [VarletUIResolver({ autoImport: true })]
     })],
-  })],
+  }),    UnoCSS()],
 })