2 년 전 · 53da684382
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
 
				   <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</title>
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
			
 
				+    <title>Punch In</title>
			
 
				   </head>
			
 
				   <body>
			
 
				     <div id="app"></div>
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,7 +9,20 @@
 
				     "preview": "vite preview"
			
 
				   },
			
 
				   "dependencies": {
			
 
				-    "vue": "^3.3.4"
			
 
				+    "amfe-flexible": "^2.2.1",
			
 
				+    "autoprefixer": "^10.4.14",
			
 
				+    "axios": "^1.4.0",
			
 
				+    "consola": "^3.2.3",
			
 
				+    "dsbridge": "^3.1.4",
			
 
				+    "eruda": "^3.0.1",
			
 
				+    "path": "^0.12.7",
			
 
				+    "postcss-pxtorem": "^6.0.0",
			
 
				+    "sass": "^1.64.0",
			
 
				+    "vant": "^4.6.2",
			
 
				+    "vite-plugin-style-import": "^2.0.0",
			
 
				+    "vue": "^3.3.4",
			
 
				+    "vue-router": "^4.2.4",
			
 
				+    "vue-wechat-title": "^2.0.7"
			
 
				   },
			
 
				   "devDependencies": {
			
 
				     "@vitejs/plugin-vue": "^4.2.3",
			
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -0,0 +1,31 @@
 
				+
			
 
				+
			
 
				+// module.exports = {
			
 
				+//     plugins: {
			
 
				+//         autoprefixer: {},
			
 
				+//         // https://github.com/evrone/postcss-px-to-viewport/blob/HEAD/README_CN.md
			
 
				+//         // https://www.shangmayuan.com/a/455cef3107c848f9a6190e82.html
			
 
				+//         'postcss-px-to-viewport': {
			
 
				+//             unitToConvert: 'px', // 需要转换的单位，默认为"px"
			
 
				+//             viewportWidth: 750, // 设计稿的宽度
			
 
				+//             unitPrecision: 4,// 单位转换后保留的精度
			
 
				+//             viewportUnit: 'vw', //(String) 希望使用的视口单位
			
 
				+//             fontViewportUnit: 'vw', //(String) 字体使用的视口单位
			
 
				+//         }
			
 
				+//     }    
			
 
				+    
			
 
				+//   }
			
 
				+// postcss.config.js
			
 
				+module.exports = {
			
 
				+    plugins: {
			
 
				+        autoprefixer: {},
			
 
				+        // postcss-pxtorem 插件的版本需要 >= 5.0.0
			
 
				+        'postcss-pxtorem': {
			
 
				+            rootValue({ file }) {
			
 
				+                return 37.5;
			
 
				+                //return file.indexOf('vant') !== -1 ? 37.5 : 75;
			
 
				+            },
			
 
				+            propList: ['*'],
			
 
				+        },
			
 
				+    },
			
 
				+  };
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,14 @@
 
				-<script setup>
			
 
				-import HelloWorld from './components/HelloWorld.vue'
			
 
				+
			
 
				+<script setup >
			
 
				+import { RouterView } from 'vue-router';
			
 
				+
			
 
				+
			
 
				 </script>
			
 
				 
			
 
				 <template>
			
 
				-  <div>
			
 
				-    <a href="https://vitejs.dev" target="_blank">
			
 
				-      <img src="/vite.svg" class="logo" alt="Vite logo" />
			
 
				-    </a>
			
 
				-    <a href="https://vuejs.org/" target="_blank">
			
 
				-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
			
 
				-    </a>
			
 
				-  </div>
			
 
				-  <HelloWorld msg="Vite + Vue" />
			
 
				+  <RouterView  v-wechat-title="$route.meta.title"   ></RouterView>
			
 
				 </template>
			
 
				 
			
 
				-<style scoped>
			
 
				-.logo {
			
 
				-  height: 6em;
			
 
				-  padding: 1.5em;
			
 
				-  will-change: filter;
			
 
				-  transition: filter 300ms;
			
 
				-}
			
 
				-.logo:hover {
			
 
				-  filter: drop-shadow(0 0 2em #646cffaa);
			
 
				-}
			
 
				-.logo.vue:hover {
			
 
				-  filter: drop-shadow(0 0 2em #42b883aa);
			
 
				-}
			
 
				-</style>
			
 
				+<style lang="scss" >
			
 
				+@import "./assets/css/common.scss"
			
 
				+</style>
			
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -0,0 +1,111 @@
 
				+*{
			
 
				+    margin:0;
			
 
				+    padding:0;
			
 
				+}
			
 
				+button{
			
 
				+    background: none;
			
 
				+    border:none;
			
 
				+}
			
 
				+button:focus,
			
 
				+select:focus,
			
 
				+input:focus{
			
 
				+    outline: none;
			
 
				+}
			
 
				+html,body{
			
 
				+    width:100%;
			
 
				+    height:100%;
			
 
				+}
			
 
				+#app {
			
 
				+    width:100%;
			
 
				+    height:100%;
			
 
				+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
			
 
				+}
			
 
				+.icon{
			
 
				+    width: 1em;
			
 
				+    height: 1em;
			
 
				+    vertical-align: -0.15em;
			
 
				+    fill: currentColor;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+/**自定义滚动条样式 */
			
 
				+.scrollbar-style{
			
 
				+    /**work on FireFox https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars */
			
 
				+    scrollbar-color: #999999 transparent; /* 第一个值是滑块颜色，第二个值是轨道背景颜色 */
			
 
				+    scrollbar-width: thin;
			
 
				+}
			
 
				+/**work on Chrome, Edge, Safari 
			
 
				+::-webkit-scrollbar— 整个滚动条.
			
 
				+::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
			
 
				+::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
			
 
				+::-webkit-scrollbar-track — 滚动条轨道.
			
 
				+::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
			
 
				+::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
			
 
				+::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
			
 
				+* https://segmentfault.com/a/1190000020991323
			
 
				+*/
			
 
				+.scrollbar-style::-webkit-scrollbar{
			
 
				+    width: 8px; /* 垂直滚动条宽度 */
			
 
				+    height: 8px; /* 水平滚动条高度 */
			
 
				+}
			
 
				+.scrollbar-style::-webkit-scrollbar-track{
			
 
				+    background-color: transparent;
			
 
				+}
			
 
				+.scrollbar-style::-webkit-scrollbar-thumb{
			
 
				+    background: #999999;
			
 
				+    border-radius: 25px;
			
 
				+}
			
 
				+
			
 
				+.scrollbar-style::-webkit-scrollbar-corner{
			
 
				+    background-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.page{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    padding: 30px 20px;
			
 
				+    color:#000000;
			
 
				+}
			
 
				+.page-h1{
			
 
				+    font-size: 36px;
			
 
				+    font-weight: bold;
			
 
				+    padding: 20px 0;
			
 
				+}
			
 
				+.page-h2{
			
 
				+    font-size: 32px;
			
 
				+    font-weight: bold;
			
 
				+    padding: 20px 0;
			
 
				+}
			
 
				+.page-h3{
			
 
				+    font-size: 28px;
			
 
				+    font-weight: bold;
			
 
				+}
			
 
				+.page-p{
			
 
				+    font-size: 24px;
			
 
				+    line-height: 1.5em;
			
 
				+}
			
 
				+.page-p.x-large{
			
 
				+    font-size: 32px;
			
 
				+    line-height: 1.5em;
			
 
				+}
			
 
				+.page-p.large{
			
 
				+    font-size: 30px;
			
 
				+    line-height: 1.5em;
			
 
				+}
			
 
				+.page-p.medium{
			
 
				+    font-size: 28px;
			
 
				+    line-height: 1.5em;
			
 
				+}
			
 
				+.page-p img{
			
 
				+    width: 100%;
			
 
				+    height: auto;
			
 
				+}
			
 
				+
			
 
				+.text-overflow-2{
			
 
				+    overflow:hidden;
			
 
				+    text-overflow:ellipsis;
			
 
				+    display:-webkit-box;
			
 
				+    -webkit-line-clamp:2;
			
 
				+    -webkit-box-orient:vertical;
			
 
				+    font-size: 24px;
			
 
				+    line-height: 1.5em;
			
 
				+}
			
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,40 +0,0 @@
 
				-<script setup>
			
 
				-import { ref } from 'vue'
			
 
				-
			
 
				-defineProps({
			
 
				-  msg: String,
			
 
				-})
			
 
				-
			
 
				-const count = ref(0)
			
 
				-</script>
			
 
				-
			
 
				-<template>
			
 
				-  <h1>{{ msg }}</h1>
			
 
				-
			
 
				-  <div class="card">
			
 
				-    <button type="button" @click="count++">count is {{ count }}</button>
			
 
				-    <p>
			
 
				-      Edit
			
 
				-      <code>components/HelloWorld.vue</code> to test HMR
			
 
				-    </p>
			
 
				-  </div>
			
 
				-
			
 
				-  <p>
			
 
				-    Check out
			
 
				-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
			
 
				-      >create-vue</a
			
 
				-    >, the official Vue + Vite starter
			
 
				-  </p>
			
 
				-  <p>
			
 
				-    Install
			
 
				-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
			
 
				-    in your IDE for a better DX
			
 
				-  </p>
			
 
				-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
			
 
				-</template>
			
 
				-
			
 
				-<style scoped>
			
 
				-.read-the-docs {
			
 
				-  color: #888;
			
 
				-}
			
 
				-</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,21 @@
 
				-import { createApp } from 'vue'
			
 
				-import './style.css'
			
 
				+import * as Vue from 'vue'
			
 
				+import 'amfe-flexible'
			
 
				+import VueWechatTitle from 'vue-wechat-title';
			
 
				+import {router} from './router/router';
			
 
				+
			
 
				 import App from './App.vue'
			
 
				+import bridge from 'dsbridge';
			
 
				+
			
 
				+const app = Vue.createApp(App);
			
 
				+
			
 
				+var userToken = bridge.call('gettoken');
			
 
				+console.log('入口文件获取userToken ----- ', userToken);
			
 
				+// app.provide('userToken', userToken);
			
 
				+if(userToken) {
			
 
				+    window.sessionStorage.setItem('usertoken', userToken);
			
 
				+}
			
 
				+
			
 
				 
			
 
				-createApp(App).mount('#app')
			
 
				+app.use(router);
			
 
				+app.use(VueWechatTitle);
			
 
				+app.mount('#app');
			
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -0,0 +1,8 @@
 
				+import * as VueRouter from 'vue-router';
			
 
				+import { routes } from './routes';
			
 
				+
			
 
				+const router =VueRouter.createRouter({
			
 
				+    history:VueRouter.createWebHashHistory(),
			
 
				+    routes,
			
 
				+});
			
 
				+export {router};
			
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -0,0 +1,31 @@
 
				+import * as VueRouter  from 'vue-router';
			
 
				+// 1. 定义路由组件.
			
 
				+// 也可以从其他文件导入
			
 
				+import Home from '@/view/Home/Home.vue';
			
 
				+import Test from '@/view/Test/Test.vue';
			
 
				+// const Home = { template: '<div>Home</div>' }
			
 
				+// const About = { template: '<div>About</div>' }
			
 
				+
			
 
				+// 2. 定义一些路由
			
 
				+// 每个路由都需要映射到一个组件。
			
 
				+// 我们后面再讨论嵌套路由。
			
 
				+const routes = [
			
 
				+    { 
			
 
				+        name: 'Home', 
			
 
				+        path: '/', 
			
 
				+        component: Home,
			
 
				+        meta: {
			
 
				+            title: 'Punch In '
			
 
				+        }
			
 
				+    },
			
 
				+    { 
			
 
				+        name: 'Test', 
			
 
				+        path: '/test', 
			
 
				+        component: Test,
			
 
				+        meta: {
			
 
				+            title: 'Test'
			
 
				+        }
			
 
				+    },
			
 
				+]
			
 
				+
			
 
				+export { routes };
			
--- a/src/style.css
+++ b/src/style.css
@@ -1,89 +0,0 @@
 
				-:root {
			
 
				-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
			
 
				-  line-height: 1.5;
			
 
				-  font-weight: 400;
			
 
				-
			
 
				-  color-scheme: light dark;
			
 
				-  color: rgba(255, 255, 255, 0.87);
			
 
				-  background-color: #242424;
			
 
				-
			
 
				-  font-synthesis: none;
			
 
				-  text-rendering: optimizeLegibility;
			
 
				-  -webkit-font-smoothing: antialiased;
			
 
				-  -moz-osx-font-smoothing: grayscale;
			
 
				-  -webkit-text-size-adjust: 100%;
			
 
				-}
			
 
				-
			
 
				-a {
			
 
				-  font-weight: 500;
			
 
				-  color: #646cff;
			
 
				-  text-decoration: inherit;
			
 
				-}
			
 
				-a:hover {
			
 
				-  color: #535bf2;
			
 
				-}
			
 
				-
			
 
				-a {
			
 
				-  font-weight: 500;
			
 
				-  color: #646cff;
			
 
				-  text-decoration: inherit;
			
 
				-}
			
 
				-a:hover {
			
 
				-  color: #535bf2;
			
 
				-}
			
 
				-
			
 
				-body {
			
 
				-  margin: 0;
			
 
				-  display: flex;
			
 
				-  place-items: center;
			
 
				-  min-width: 320px;
			
 
				-  min-height: 100vh;
			
 
				-}
			
 
				-
			
 
				-h1 {
			
 
				-  font-size: 3.2em;
			
 
				-  line-height: 1.1;
			
 
				-}
			
 
				-
			
 
				-button {
			
 
				-  border-radius: 8px;
			
 
				-  border: 1px solid transparent;
			
 
				-  padding: 0.6em 1.2em;
			
 
				-  font-size: 1em;
			
 
				-  font-weight: 500;
			
 
				-  font-family: inherit;
			
 
				-  background-color: #1a1a1a;
			
 
				-  cursor: pointer;
			
 
				-  transition: border-color 0.25s;
			
 
				-}
			
 
				-button:hover {
			
 
				-  border-color: #646cff;
			
 
				-}
			
 
				-button:focus,
			
 
				-button:focus-visible {
			
 
				-  outline: 4px auto -webkit-focus-ring-color;
			
 
				-}
			
 
				-
			
 
				-.card {
			
 
				-  padding: 2em;
			
 
				-}
			
 
				-
			
 
				-#app {
			
 
				-  max-width: 1280px;
			
 
				-  margin: 0 auto;
			
 
				-  padding: 2rem;
			
 
				-  text-align: center;
			
 
				-}
			
 
				-
			
 
				-@media (prefers-color-scheme: light) {
			
 
				-  :root {
			
 
				-    color: #213547;
			
 
				-    background-color: #ffffff;
			
 
				-  }
			
 
				-  a:hover {
			
 
				-    color: #747bff;
			
 
				-  }
			
 
				-  button {
			
 
				-    background-color: #f9f9f9;
			
 
				-  }
			
 
				-}
			
--- a/src/view/Home/Home.vue
+++ b/src/view/Home/Home.vue
@@ -0,0 +1,13 @@
 
				+<script setup>
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<template>
			
 
				+<h1> home页面</h1>
			
 
				+
			
 
				+</template>
			
 
				+
			
 
				+<style scoped lang="css" >
			
 
				+@import "./home.css";
			
 
				+</style>
			
--- a/src/view/Home/home.css
+++ b/src/view/Home/home.css
@@ -0,0 +1,4 @@
 
				+h1{
			
 
				+    height: 2rem;
			
 
				+    color: pink ;
			
 
				+}
			
--- a/src/view/Test/Test.vue
+++ b/src/view/Test/Test.vue
@@ -0,0 +1,23 @@
 
				+<script setup>
			
 
				+/**
			
 
				+ * 在 setup 中你应该避免使用 this，因为它不会找到组件实例。
			
 
				+ * setup 的调用发生在 data property、computed property 或 methods 被解析之前，
			
 
				+ * 所以它们无法在 setup 中被获取。
			
 
				+ */
			
 
				+import { ref, onMounted, watch, inject } from 'vue';
			
 
				+import { useRouter } from 'vue-router';
			
 
				+const rotating = ref(true);
			
 
				+</script>
			
 
				+
			
 
				+<template>
			
 
				+ 
			
 
				+<div class="lucky-wheel-root-inner rotating">
			
 
				+    dfgdfgf
			
 
				+</div>
			
 
				+
			
 
				+   
			
 
				+</template>
			
 
				+
			
 
				+<style scoped >
			
 
				+@import "./test.css";
			
 
				+</style>
			
--- a/src/view/Test/test.css
+++ b/src/view/Test/test.css
@@ -0,0 +1,13 @@
 
				+.lucky-wheel-root-inner{
			
 
				+    position: relative;
			
 
				+    box-sizing: border-box;
			
 
				+    width: 8.48rem;
			
 
				+    height: 8.48rem;
			
 
				+    margin: .16rem auto 0 auto;
			
 
				+    background-image: url('https://cdn.westkiss.com/media/wysiwyg/wap/202303211430.png');
			
 
				+    background-position: 0 0;
			
 
				+    background-size: 100% 100%;
			
 
				+    box-shadow: 0 .5333rem .5333rem 0px rgba(158,106,112,0.5);
			
 
				+    border-radius: 50%;
			
 
				+    transform: rotate(0deg);
			
 
				+}
			
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,92 @@
 
				-import { defineConfig } from 'vite'
			
 
				-import vue from '@vitejs/plugin-vue'
			
 
				+import { resolve } from 'path';
			
 
				+import { defineConfig } from 'vite';
			
 
				+import vue from '@vitejs/plugin-vue';
			
 
				+// import styleImport, { VantResolve } from 'vite-plugin-style-import';
			
 
				+function pathResolve(dir) {
			
 
				+  return resolve(__dirname, dir);
			
 
				+}
			
 
				 
			
 
				 // https://vitejs.dev/config/
			
 
				 export default defineConfig({
			
 
				-  plugins: [vue()],
			
 
				+    base: './',
			
 
				+    build: {
			
 
				+      outDir: 'dist/punchin'
			
 
				+    },
			
 
				+    resolve:{
			
 
				+        alias:[
			
 
				+            {
			
 
				+                find: '@',
			
 
				+                replacement: pathResolve('src'),
			
 
				+            }
			
 
				+        ],
			
 
				+    },
			
 
				+    plugins: [
			
 
				+      vue(),
			
 
				+      // styleImport({
			
 
				+      //   // vant
			
 
				+      //   libs: [
			
 
				+      //     {
			
 
				+      //       libraryName: 'vant',
			
 
				+      //       esModule: true,
			
 
				+      //       // https://github.com/anncwb/vite-plugin-style-import/issues/52
			
 
				+      //       resolveStyle: (name) => `../es/${name}/style/index`,
			
 
				+      //       // resolveStyle: (name) => `../node_modules/vant/es/${name}/style/index`, // 如果报找不到vant可以改用上面的路径
			
 
				+      //     },
			
 
				+      //   ],
			
 
				+      //   // nutui
			
 
				+
			
 
				+
			
 
				+      //   // libs: [
			
 
				+      //   //   {
			
 
				+      //   //     libraryName: '@nutui/nutui',
			
 
				+      //   //     libraryNameChangeCase: 'pascalCase',
			
 
				+      //   //     resolveStyle: (name) => {
			
 
				+      //   //       return `@nutui/nutui/dist/packages/${name}/index.scss`
			
 
				+      //   //     }
			
 
				+      //   //   }
			
 
				+      //   // ]
			
 
				+
			
 
				+
			
 
				+        
			
 
				+      // }),
			
 
				+    ],
			
 
				+    css: {
			
 
				+      preprocessorOptions: {
			
 
				+        scss: {
			
 
				+          charset: false,
			
 
				+          // 配置 nutui 全局 scss 变量
			
 
				+          // additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+    server: {
			
 
				+        proxy: {
			
 
				+          // 字符串简写写法
			
 
				+        //   '/api': 'http://www.myblog.com/api',
			
 
				+          // 选项写法
			
 
				+          '/app-api': {
			
 
				+            target: 'htttps:alipearlapp.snjon.com',
			
 
				+            // "https://ios.alipearlhair.com",//正式站    'http://www.myblog.com',
			
 
				+            changeOrigin: true, // 设置成false报错
			
 
				+            // rewrite: (path) => {
			
 
				+            //     console.log(path,'ooooooooooooo');
			
 
				+            //     path.replace(/^\/api/, '')
			
 
				+            // }
			
 
				+          },
			
 
				+          '/api': {
			
 
				+            target: "http://actapi.snjon.com",//'http://www.myblog.com',
			
 
				+            changeOrigin: true, // 设置成false报错
			
 
				+            // rewrite: (path) => {
			
 
				+            //     console.log(path,'ooooooooooooo');
			
 
				+            //     path.replace(/^\/api/, '')
			
 
				+            // }
			
 
				+          }
			
 
				+          // 正则表达式写法
			
 
				+        //   '^/fallback/.*': {
			
 
				+        //     target: 'http://jsonplaceholder.typicode.com',
			
 
				+        //     changeOrigin: true,
			
 
				+        //     rewrite: (path) => path.replace(/^\/fallback/, '')
			
 
				+        //   }
			
 
				+        }
			
 
				+    }
			
 
				 })