feat:pc

package.json

@@ -8,7 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.25"
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.0.24",
+    "vue": "^3.2.25",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
@@ -16,4 +20,4 @@
     "vite": "^2.9.9",
     "vue-tsc": "^0.34.7"
   }
-}
\ No newline at end of file
+}

postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/App.vue

 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <div class=" bg-bgPurple">
+    <router-view></router-view>
+  </div>
 </template>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 </style>

src/components/Btn.vue

+<script lang="ts" setup>
+interface Props {
+  text: string
+  icon?: string
+  pattern?: 'download' | 'default'
+}
+const props = withDefaults(defineProps<Props>(),{
+  pattern: 'default'
+})
+
+const handleClick = (()=>{
+  console.log('click');
+  
+})
+
+</script>
+
+<template>
+  <button class=" bg-gray-800 text-white w-64 h-14 rounded-3xl inline-block"> 
+    <img v-if="props.icon" :src="props.icon" @click="handleClick">  
+    <span >{{props.text}}</span>
+  </button>
+</template>
\ No newline at end of file

src/components/HelloWorld.vue

-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Docs
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

src/components/Logo.vue

+<template>
+  <div class=" flex items-center justify-center md:justify-start">
+    <img src="@/assets/logo.png" class="md:w-20 md:h-20 w-14 h-14 ">
+    <div class=" text-mainPurple text-2xl font-semibold pl-2">上链购</div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
\ No newline at end of file

src/index.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file

src/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
-
-createApp(App).mount('#app')
+import './index.css'
+import myRouter from '@/router'
+createApp(App).use(myRouter).mount('#app')

src/router/index.ts

+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+
+export const basicRoutes = [
+  {
+    path: '/',
+    name: 'Index',
+    redirect: '/download',
+  },
+  {
+    path: '/download',
+    name: 'Download',
+    component:()=>import('@/views/download/index.vue')
+  },
+] as RouteRecordRaw[]
+
+const myRouter = createRouter({
+  history: createWebHashHistory(),
+  routes: basicRoutes
+})
+
+export default myRouter

src/views/download/index.vue

+<script lang="ts" setup>
+import Logo from '@/components/Logo.vue';
+import SlgBtn from '@/components/Btn.vue'
+</script>
+
+<template>
+  <div class=" md:hidden">
+    <div class=" pt-12 mx-auto">
+      <Logo />
+    </div>
+    <div class=" text-gray-800 font-semibold mx-auto text-2xl text-center pt-10">下载上链购数字藏品平台</div>
+    <div class=" text-gray-500 text-lg text-center pt-7">集溯源与数字藏品<br>虚实融合的资产数字化平台</div>
+    <SlgBtn text="ios"></SlgBtn>
+  </div>
+</template>
\ No newline at end of file

tailwind.config.js

+module.exports = {
+  content: ["./src/**/*.{html,js,ts,vue}"],
+  theme: {
+    extend: {
+      colors:{
+        mainPurple:'#4C37D6',
+        secondaryPurple:'#D0C7FB',
+        bgPurple:'#E8E7FC',
+      }
+    },
+  },
+  plugins: [],
+}

tsconfig.json

@@ -11,7 +11,11 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*":["src/*"]
+    },
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -3,5 +3,13 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
+  resolve:{
+    alias: 
+    [
+      {
+        find:'@',replacement:'/src'
+      },
+    ],
+  }
 })