2 년 전 · a3ab22c5eb
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,5 @@
 
				+node_modules
			
 
				+.DS_Store
			
 
				+dist
			
 
				+dist-ssr
			
 
				+*.local
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,36 @@
 
				+# Vue 3 + Vite
			
 
				+
			
 
				+This template should help get you started developing with Vue 3 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.
			
 
				+
			
 
				+## Recommended IDE Setup
			
 
				+
			
 
				+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+https://github.com/evrone/postcss-px-to-viewport/issues/72
			
 
				+
			
 
				+import { useRouter } from 'vue-router'; 必须在setup中使用 https://next.router.vuejs.org/zh/api/index.html#uselink
			
 
				+
			
 
				+> 本来想用 postcss-px-to-viewport，但是vant nutui采用的设计稿都是375宽度，只好换回postcss-pxtorem
			
 
				+
			
 
				+
			
 
				+/****
			
 
				+ * WestKiss JS 交互
			
 
				+///跳转商品详情
			
 
				+goto_pushGoodsDetailsC。
			
 
				+[@"entity_id"]
			
 
				+
			
 
				+///跳转商品分类列表
			
 
				+goto_pushProductListVC 
			
 
				+  [@"name"]  	[@"type"]
			
 
				+
			
 
				+///跳转登录
			
 
				+present_LoginC
			
 
				+
			
 
				+///分享相关内容
			
 
				+share_click
			
 
				+ @"image”，[@"title”]、[@"shareurl"]
			
 
				+ Hi, I’m using points to win $500 CASH, come and try your luck today!
			
 
				+ */
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <link rel="icon" href="/favicon.ico" />
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
			
 
				+    <title>Lucky Wheel</title>
			
 
				+    <style>
			
 
				+      .init-loading{
			
 
				+        position: fixed;
			
 
				+        top:50%;
			
 
				+        left:50%;
			
 
				+        transform: translate3d(-50%,-50%,0);
			
 
				+        width: 50%;
			
 
				+        height: auto;
			
 
				+      }
			
 
				+      .init-loading .init-loading-svg{
			
 
				+        display:block;
			
 
				+        width: 50px;
			
 
				+        height: 50px;
			
 
				+        margin:auto;
			
 
				+      }
			
 
				+    </style>
			
 
				+    <script>
			
 
				+      if(window.location.href.indexOf('_ly') < 0) {
			
 
				+        var originUrl = window.location.origin;
			
 
				+        var path = window.location.pathname;
			
 
				+        var hash = window.location.hash;
			
 
				+        window.location.href = originUrl + path + '?_ly=' + Date.now() + hash;
			
 
				+      }
			
 
				+        
			
 
				+    </script>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app">
			
 
				+      <div class="init-loading">
			
 
				+        <img class="init-loading-svg" src="/static/img/loading.svg" />
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <script type="module" src="/src/main.js"></script>
			
 
				+  </body>
			
 
				+
			
 
				+</html>
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,32 @@
 
				+{
			
 
				+  "name": "vue3_demo",
			
 
				+  "version": "0.0.0",
			
 
				+  "scripts": {
			
 
				+    "dev": "vite",
			
 
				+    "build": "vite build",
			
 
				+    "serve": "vite preview"
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "last 4 versions",
			
 
				+    "Android >= 5.0"
			
 
				+  ],
			
 
				+  "dependencies": {
			
 
				+    "amfe-flexible": "^2.2.1",
			
 
				+    "axios": "^0.24.0",
			
 
				+    "dsbridge": "^3.1.4",
			
 
				+    "qs": "^6.10.2",
			
 
				+    "vant": "^3.3.6",
			
 
				+    "vue": "^3.2.16",
			
 
				+    "vue-router": "^4.0.12",
			
 
				+    "vue-wechat-title": "^2.0.7"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vitejs/plugin-vue": "^1.9.3",
			
 
				+    "autoprefixer": "^10.4.0",
			
 
				+    "postcss": "^8.4.4",
			
 
				+    "postcss-pxtorem": "^6.0.0",
			
 
				+    "sass": "^1.44.0",
			
 
				+    "vite": "^2.6.4",
			
 
				+    "vite-plugin-style-import": "^1.4.0"
			
 
				+  }
			
 
				+}
			
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -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/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/static/img/loading.svg
+++ b/public/static/img/loading.svg
@@ -0,0 +1,5 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
			
 
				+    <circle cx="50" cy="50" fill="none" stroke="#fe3e94" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
			
 
				+        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
			
 
				+    </circle>
			
 
				+</svg>
			
--- a/public/static/img/logo.png
+++ b/public/static/img/logo.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,13 @@
 
				+<script setup>
			
 
				+// This starter template is using Vue 3 <script setup> SFCs
			
 
				+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
			
 
				+</script>
			
 
				+
			
 
				+<template>
			
 
				+  <router-view v-wechat-title="$route.meta.title"></router-view>
			
 
				+</template>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+@import "@/assets/css/common.scss";
			
 
				+
			
 
				+</style>
			
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -0,0 +1,40 @@
 
				+import axiosInstance from "@/util/request";
			
 
				+
			
 
				+function getCategoryProduct(data,config) {
			
 
				+    let url = '/app-api/product/getCategoryProduct';
			
 
				+    return axiosInstance.post(url,data,config);
			
 
				+}
			
 
				+// 获取奖品
			
 
				+function getRaffle() {
			
 
				+    let url = '/api/raffle/getRaffle';
			
 
				+    return axiosInstance.post(url);
			
 
				+}
			
 
				+// 获取中奖纪录
			
 
				+function getRaffleList(data) {
			
 
				+    let url = '/api/raffle/getRaffleList';
			
 
				+    return axiosInstance.post(url,data);
			
 
				+}
			
 
				+// 获取用户的积分和抽奖次数
			
 
				+function getPointsAndCount(data) {
			
 
				+    let url = '/api/raffle/getPoints';
			
 
				+    return axiosInstance.post(url,data);
			
 
				+}
			
 
				+// 抽奖
			
 
				+function raffleAction(data) {
			
 
				+    let url = '/api/raffle/raffle';
			
 
				+    return axiosInstance.post(url,data);
			
 
				+}
			
 
				+// 分享增加抽奖次数
			
 
				+function shareAddRaffleCount(data) {
			
 
				+    let url = '/api/raffle/shareAdd';
			
 
				+    return axiosInstance.post(url,data);
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+    getCategoryProduct,
			
 
				+    getRaffle,
			
 
				+    getRaffleList,
			
 
				+    getPointsAndCount,
			
 
				+    raffleAction,
			
 
				+    shareAddRaffleCount
			
 
				+};
			
--- a/src/api/learn-more.js
+++ b/src/api/learn-more.js
@@ -0,0 +1,10 @@
 
				+import axiosInstance from "@/util/request";
			
 
				+
			
 
				+function getLearnMoreDetail(data,config) {
			
 
				+    let url = '/index/getLearn';
			
 
				+    return axiosInstance.post(url,data,config);
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+    getLearnMoreDetail,
			
 
				+};
			
--- a/src/api/promotion.js
+++ b/src/api/promotion.js
--- a/src/api/student.js
+++ b/src/api/student.js
@@ -0,0 +1,17 @@
 
				+import axiosInstance from "@/util/request";
			
 
				+
			
 
				+function getAllStudent(data,config) {
			
 
				+    let url = '/student/all';
			
 
				+    let queryStr = '';
			
 
				+    if(data) {
			
 
				+        for(let key in data) {
			
 
				+            queryStr = queryStr ? (queryStr + '&' + key + '=' + encodeURIComponent(data[key])) : (key + '=' + encodeURIComponent(data[key]));
			
 
				+        }
			
 
				+        url = url + '?' + queryStr;
			
 
				+    }
			
 
				+    return axiosInstance.get(url,config);
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+    getAllStudent,
			
 
				+};
			
--- a/src/api/wholesale.js
+++ b/src/api/wholesale.js
@@ -0,0 +1,10 @@
 
				+import axiosInstance from "@/util/request";
			
 
				+
			
 
				+function submitWholesale(data,config) {
			
 
				+    let url = '/index/savemessage';
			
 
				+    return axiosInstance.post(url,data,config);
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+    submitWholesale
			
 
				+};
			
--- a/src/assets/countdown-banner.jpg
+++ b/src/assets/countdown-banner.jpg
--- 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/assets/img/coupon/coupon-banner.jpg
+++ b/src/assets/img/coupon/coupon-banner.jpg
--- a/src/assets/img/coupon/coupon-qrcode.jpg
+++ b/src/assets/img/coupon/coupon-qrcode.jpg
--- a/src/assets/img/coupon/coupon-red.png
+++ b/src/assets/img/coupon/coupon-red.png
--- a/src/assets/img/coupon/coupon-violet.png
+++ b/src/assets/img/coupon/coupon-violet.png
--- a/src/assets/img/promo_hair_bundles_sale/202204191600.jpg
+++ b/src/assets/img/promo_hair_bundles_sale/202204191600.jpg
--- a/src/assets/img/promo_hair_bundles_sale/202204191602.jpg
+++ b/src/assets/img/promo_hair_bundles_sale/202204191602.jpg
--- a/src/assets/img/promo_hair_bundles_sale/202204191603.jpg
+++ b/src/assets/img/promo_hair_bundles_sale/202204191603.jpg
--- a/src/assets/img/promo_hair_bundles_sale/202204201012-1.jpg
+++ b/src/assets/img/promo_hair_bundles_sale/202204201012-1.jpg
--- a/src/assets/img/promo_hair_bundles_sale/202204201012-2.jpg
+++ b/src/assets/img/promo_hair_bundles_sale/202204201012-2.jpg
--- a/src/assets/img/promo_hair_bundles_sale/202204261006-1.jpg
+++ b/src/assets/img/promo_hair_bundles_sale/202204261006-1.jpg
--- a/src/assets/img/promo_hair_bundles_sale/202204261006-2.jpg
+++ b/src/assets/img/promo_hair_bundles_sale/202204261006-2.jpg
--- a/src/assets/img/promo_hair_bundles_sale/202204261006-3.jpg
+++ b/src/assets/img/promo_hair_bundles_sale/202204261006-3.jpg
--- a/src/assets/img/promo_hair_bundles_sale/202204261006-4.jpg
+++ b/src/assets/img/promo_hair_bundles_sale/202204261006-4.jpg
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,29 @@
 
				+import * as Vue from 'vue';
			
 
				+import 'amfe-flexible';
			
 
				+import VueWechatTitle from 'vue-wechat-title';
			
 
				+import { router } from '@/router/router.js';
			
 
				+
			
 
				+import App from '@/App.vue';
			
 
				+import bridge from 'dsbridge';
			
 
				+
			
 
				+// 创建并挂载根实例
			
 
				+const app = Vue.createApp(App);
			
 
				+
			
 
				+
			
 
				+var userToken = bridge.call('gettoken');
			
 
				+var userToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsYXQiOjE2ODU3NTI3NzQsIm5iZiI6MTY4NTc1Mjc3NCwiZXhwIjoxNjg2MzU3NTc0LCJ1aWQiOiI4MTAzNCIsIndlYnNpdGUiOiJ3ZXN0a2lzcyJ9.K_zn4eGsxB1hEJ9KIdEjRvOGXDP1m-v6n_Nwkp13az4";
			
 
				+
			
 
				+
			
 
				+console.log('入口文件获取userToken ----- ', userToken);
			
 
				+// app.provide('userToken', userToken);
			
 
				+if(userToken) {
			
 
				+    window.sessionStorage.setItem('usertoken', userToken);
			
 
				+}
			
 
				+
			
 
				+//确保 _use_ 路由实例使
			
 
				+//整个应用支持路由。
			
 
				+app.use(router);
			
 
				+app.use(VueWechatTitle);
			
 
				+app.mount('#app');
			
 
				+
			
 
				+
			
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -0,0 +1,14 @@
 
				+import * as VueRouter from 'vue-router';
			
 
				+import { routes } from './routes.js';
			
 
				+
			
 
				+// 3. 创建路由实例并传递 `routes` 配置
			
 
				+// 你可以在这里输入更多的配置，但我们在这里
			
 
				+// 暂时保持简单
			
 
				+const router = VueRouter.createRouter({
			
 
				+  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
			
 
				+  history: VueRouter.createWebHashHistory(),
			
 
				+  routes, // `routes: routes` 的缩写
			
 
				+});
			
 
				+
			
 
				+
			
 
				+export { router };
			
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -0,0 +1,30 @@
 
				+// 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: 'Lucky Wheel'
			
 
				+        }
			
 
				+    },
			
 
				+    { 
			
 
				+        name: 'Test', 
			
 
				+        path: '/test', 
			
 
				+        component: Test,
			
 
				+        meta: {
			
 
				+            title: 'Test'
			
 
				+        }
			
 
				+    },
			
 
				+]
			
 
				+
			
 
				+export { routes };
			
--- a/src/util/countdown.js
+++ b/src/util/countdown.js
@@ -0,0 +1,215 @@
 
				+/**
			
 
				+ * @file 倒计时
			
 
				+ * @createDate 2022-04-12 16:21
			
 
				+ * @TODO 使用setTimeout模拟setInterval
			
 
				+ */
			
 
				+/**
			
 
				+ * ------------夏令时--------
			
 
				+ * |--北京时间--|--美国洛杉矶时间--|
			
 
				+ * |---13:00---|---22:00---|
			
 
				+ * |---14:00---|---23:00---|
			
 
				+ * |---15:00---|---00:00---|
			
 
				+ * |---16:00---|---01:00---|
			
 
				+ * |---17:00---|---02:00---|
			
 
				+ * |---18:00---|---03:00---|
			
 
				+ * |---19:00---|---04:00---|
			
 
				+ * |---20:00---|---05:00---|
			
 
				+ * |---21:00---|---06:00---|
			
 
				+ * |---22:00---|---07:00---|
			
 
				+ * |---23:00---|---08:00---|
			
 
				+ * |---24:00---|---09:00---|
			
 
				+ * |---01:00---|---10:00---|
			
 
				+ * |---02:00---|---11:00---|
			
 
				+ * |---03:00---|---12:00---|
			
 
				+ * |---04:00---|---13:00---|
			
 
				+ * |---05:00---|---14:00---|
			
 
				+ * |---06:00---|---15:00---|
			
 
				+ * |---07:00---|---16:00---|
			
 
				+ * |---08:00---|---17:00---|
			
 
				+ * |---09:00---|---18:00---|
			
 
				+ * 2022-04-11 09:00:00  -- 2022-04-10 18:00:00 getTime 得到的数是相同的
			
 
				+ * 2022-04-12 09:00:00  -- 2022-04-11 18:00:00
			
 
				+ * 
			
 
				+ */
			
 
				+const LYCountDown = {
			
 
				+    noop: function() {},
			
 
				+    GTM_TIME_ZONE: 8, // 北京时间，东八区
			
 
				+    addZero: function(i) {
			
 
				+        return i < 10 ? "0" + i : i + "";
			
 
				+    },
			
 
				+    // 将当地时间的时针读数转为北京时间的时针读数
			
 
				+    getBeijingHours: function (oriDate) {
			
 
				+        var beijingHours = oriDate.getHours() + oriDate.getTimezoneOffset() / 60 + this.GTM_TIME_ZONE;
			
 
				+        if(beijingHours === 24) {
			
 
				+            beijingHours = 0;
			
 
				+        }
			
 
				+        if(beijingHours > 24) {
			
 
				+            beijingHours = beijingHours - 24;
			
 
				+        }
			
 
				+        return beijingHours;
			
 
				+    },
			
 
				+    renderCountDownText: function (endTime,hasDays) {
			
 
				+        var nowDate = new Date().getTime();
			
 
				+        var newDate = endTime;
			
 
				+        var totalSeconds = (newDate - nowDate) / 1000;
			
 
				+        var days, hours, mins, seconds;
			
 
				+        if (totalSeconds > 0) {
			
 
				+            if(hasDays) {
			
 
				+                days = Math.floor(totalSeconds / 3600 / 24);
			
 
				+                hours = Math.floor(totalSeconds / 3600) % 24;
			
 
				+            } else {
			
 
				+                days = 0;
			
 
				+                hours = Math.floor(totalSeconds / 3600);
			
 
				+            }
			
 
				+
			
 
				+            mins = Math.floor(totalSeconds / 60) % 60;
			
 
				+            seconds = Math.floor(totalSeconds) % 60;
			
 
				+
			
 
				+        }
			
 
				+        return {
			
 
				+            totalSeconds: totalSeconds,
			
 
				+            days: days,
			
 
				+            hours: hours,
			
 
				+            minutes: mins,
			
 
				+            seconds: seconds
			
 
				+        };
			
 
				+    },
			
 
				+};
			
 
				+/**
			
 
				+ * 
			
 
				+ * @param {Object} options 实例化时的配置项
			
 
				+ * - deadlineTime {Number} 倒计时结束的时间 时间戳 单位ms
			
 
				+ * - computeDays {Boolean} 是否计算天数，true表示计算天数，即多于一天的显示天数；false不计算天数，即多于一天的不计算天数，全部归到小时里。
			
 
				+ * - endCallback {Function} 倒计时结束时的回调函数
			
 
				+ */
			
 
				+LYCountDown.DeadlineCountdown = function(options) {
			
 
				+
			
 
				+    this.deadlineTime = options.deadlineTime || new Date().getTime();
			
 
				+    this.endCallback = options.endCallback || LYCountDown.noop;
			
 
				+    this.countdownCalback = options.countdownCalback || LYCountDown.noop;
			
 
				+    this.computeDays = !!options.computeDays;
			
 
				+    this.init();
			
 
				+};
			
 
				+LYCountDown.DeadlineCountdown.prototype = {
			
 
				+    constructor: LYCountDown.DeadlineCountdown,
			
 
				+    init:function() {
			
 
				+        return this.startDeadlineTimeCountdown(this.deadlineTime,this.endCallback);
			
 
				+    },
			
 
				+    /**
			
 
				+     * 
			
 
				+     * @param {Number} timeStr 倒计时结束时间的时间戳 
			
 
				+     * @param {Function} endFunc 倒计时结束后的回调函数
			
 
				+     * @returns setInterval函数的id
			
 
				+     */
			
 
				+    startDeadlineTimeCountdown: function (timeStr,endFunc) {
			
 
				+        var that = this;
			
 
				+        var timer = setInterval(function() {
			
 
				+            var res = LYCountDown.renderCountDownText(timeStr,that.computeDays)
			
 
				+            if(res.totalSeconds <= 0) {
			
 
				+                clearInterval(timer);
			
 
				+                endFunc && endFunc();
			
 
				+            } else {
			
 
				+                that.countdownCalback(res.countDownRes);
			
 
				+            }
			
 
				+        },1000);
			
 
				+        return timer;
			
 
				+    },
			
 
				+
			
 
				+};
			
 
				+
			
 
				+
			
 
				+/**
			
 
				+ * 
			
 
				+ * @param {Object} options 实例化时的配置项
			
 
				+ * - startTime {Number} 倒计时初始开始时间 时间戳 单位ms
			
 
				+ * - countSeconds {Number} 需要倒计时的秒数  单位s
			
 
				+ * - countNum {Number} 倒计时循环次数 0表示无限循环
			
 
				+ * - computeDays {Boolean} 是否计算天数，true表示计算天数，即多于一天的显示天数；false不计算天数，即多于一天的不计算天数，全部归到小时里。
			
 
				+ * - endCallback {Function} 倒计时结束时的回调函数
			
 
				+ */
			
 
				+LYCountDown.CycleCountDown = function(options) {
			
 
				+    this.startTime = options.startTime;
			
 
				+    this.countSeconds = options.countSeconds;
			
 
				+    this.countNum = options.countNum;
			
 
				+    this.endCallback = options.endCallback || LYCountDown.noop;
			
 
				+    this.countdownCalback = options.countdownCalback || LYCountDown.noop;
			
 
				+    this.computeDays = !!options.computeDays;
			
 
				+
			
 
				+    this.init();
			
 
				+};
			
 
				+LYCountDown.CycleCountDown.prototype = {
			
 
				+    constructor: LYCountDown.CycleCountDown,
			
 
				+    init:function() {
			
 
				+        return this.startCycleCountDown({
			
 
				+            startTime: this.startTime,
			
 
				+            countSeconds: this.countSeconds,
			
 
				+            countNum: this.countNum,
			
 
				+        },this.endCallback);
			
 
				+    },
			
 
				+    
			
 
				+    cycleCountDown: function (countdownOptions,hasDays) {
			
 
				+        var res = {
			
 
				+            status: -1
			
 
				+        };
			
 
				+        var originalTime = countdownOptions.startTime;
			
 
				+        var countSeconds = countdownOptions.countSeconds;
			
 
				+        var countNum = countdownOptions.countNum;
			
 
				+        var nowTime = new Date().getTime();
			
 
				+        var endTime = 0;
			
 
				+        if( nowTime >= originalTime ) {
			
 
				+            var divideTime = countSeconds * 1000; // ms
			
 
				+            var differTime = nowTime - originalTime;
			
 
				+            
			
 
				+            var quotient = Math.floor(differTime / divideTime); // 商
			
 
				+            var s = differTime % divideTime; // 余数
			
 
				+
			
 
				+            if((countNum && quotient < countNum) || countNum === 0) {
			
 
				+                if(s) {
			
 
				+                    endTime = nowTime + divideTime - s;
			
 
				+                } else { // 整除
			
 
				+                    if((differTime / divideTime) < 1) {
			
 
				+                        endTime = originalTime + divideTime;
			
 
				+                    } else {
			
 
				+                        endTime = nowTime + divideTime;
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+            if(endTime) {
			
 
				+                res.countDownRes = LYCountDown.renderCountDownText(endTime,hasDays);
			
 
				+                res.status = 1;
			
 
				+            } else{
			
 
				+                res.status = -1;
			
 
				+            }
			
 
				+        } else {
			
 
				+            res.status = 0;
			
 
				+        }
			
 
				+   
			
 
				+        return res;
			
 
				+    },
			
 
				+    startCycleCountDown: function (countdownOptions,endCallback) {
			
 
				+        var that = this;
			
 
				+        var timer = setInterval(function() {
			
 
				+            var res = that.cycleCountDown(countdownOptions,that.computeDays);
			
 
				+            // console.log('res -- ', res);
			
 
				+            if(res.status === -1) {
			
 
				+                clearInterval(timer);
			
 
				+                endCallback();
			
 
				+            } else {
			
 
				+                
			
 
				+                that.countdownCalback(res.countDownRes);
			
 
				+                
			
 
				+            }
			
 
				+        },1000);
			
 
				+        return timer;
			
 
				+    }
			
 
				+    
			
 
				+};
			
 
				+
			
 
				+// export default {LYCountDown};
			
 
				+export {LYCountDown}
			
 
				+
			
 
				+/**
			
 
				+ * export const a = 0; ==> export {a}; import 时使用 import {a} from 'js';
			
 
				+ * 
			
 
				+ * export default a; 相当于 default = a, 输出的是一个匿名的对象，import时不可以进行解构赋值
			
 
				+ */
			
--- a/src/util/lib.js
+++ b/src/util/lib.js
@@ -0,0 +1,55 @@
 
				+import { router } from '@/router/router.js';
			
 
				+import qs from 'qs';
			
 
				+
			
 
				+// 跳转app页面 的函数
			
 
				+function toApp(item) {
			
 
				+    console.log(item.type);
			
 
				+    let url = '';
			
 
				+    if(item.type ==="product") {
			
 
				+        url = '/pages/product/product?productId=' + item.productId
			
 
				+    } else if(item.type ==="category") {
			
 
				+        url = '/pages/product/list?' + 'categoryId=' + item.categoryId + '&categoryName=' + encodeURIComponent(item.name)
			
 
				+    } else if(item.type === 0 || item.type === 'web') { // 有问题，无法跳转
			
 
				+        url = '/pages/webview/webview?url=' + encodeURIComponent(item.url)
			
 
				+    } else if(item.type === 'router') {
			
 
				+        router.push(item.path);
			
 
				+        return;
			
 
				+    }
			
 
				+    console.log('toapp url == ', url);
			
 
				+    uni.navigateTo({
			
 
				+        url: url
			
 
				+    });
			
 
				+}
			
 
				+// 获取链接中的参数 返回对象 qs location.hash, location.search
			
 
				+function getUrlParam() {
			
 
				+    let searchUrl = location.search;
			
 
				+    let hashUrl = location.hash;
			
 
				+    let searchQueryStr = '';
			
 
				+    let hashQueryStr = '';
			
 
				+    let res = {};
			
 
				+    if(searchUrl) {
			
 
				+        searchQueryStr = searchUrl.split('?')[1];
			
 
				+    }
			
 
				+    if(hashUrl) {
			
 
				+        hashQueryStr = hashUrl.split('?')[1];
			
 
				+    }
			
 
				+    if(searchQueryStr) {
			
 
				+        res = Object.assign({},res,qs.parse(searchQueryStr));
			
 
				+    }
			
 
				+    if(hashQueryStr) {
			
 
				+        res = Object.assign({},res,qs.parse(hashQueryStr));
			
 
				+    }
			
 
				+
			
 
				+    return res;
			
 
				+}
			
 
				+
			
 
				+//动态引入图片
			
 
				+function getAssetsImg(url) {
			
 
				+    console.log(import.meta.url);
			
 
				+    return new URL(`../assets/img/${url}`, import.meta.url).href;
			
 
				+}
			
 
				+export {
			
 
				+    toApp,
			
 
				+    getUrlParam,
			
 
				+    getAssetsImg
			
 
				+}
			
--- a/src/util/rafflerotating.js
+++ b/src/util/rafflerotating.js
@@ -0,0 +1,129 @@
 
				+function RaffleRotate(option) {
			
 
				+    this.prizeNums = option.prizeNums; // 奖项个数
			
 
				+    this.prizeDeg = 360 / option.prizeNums; // 每个奖项所占的角度
			
 
				+    this.activePrize = 0; // 抽中的奖项序号 0角度的奖项对应最后一个序号： 比如6个奖项，0角度时的奖项序号是6
			
 
				+    this.rotateDom = null;
			
 
				+    if(option.rotateDom) {
			
 
				+        this.rotateDom = option.rotateDom;
			
 
				+    }
			
 
				+    this.endCallback = option.endCallback || function() {}; // 转动结束时的回调函数
			
 
				+
			
 
				+    this.preTimestamp = 0; //前一次requestAnimationFrame调用的时刻
			
 
				+    this.originalStartTimes = 0; // 转动动画最开始的时间点
			
 
				+    this.easeOutSatrtDeg = 0; // 开始减速时rotateDom转动的角度
			
 
				+    this.easeOutTimer = 0; // 减速转动开始的时刻
			
 
				+    this.easeOutEndDeg = 0; // 减速转动结束时rotateDom应该停留的角度
			
 
				+
			
 
				+    this.deg = 0; // rotateDom的实时角度
			
 
				+    this.maxSpeed = 20; // 转动的最大速度
			
 
				+    this.isRotating = false; // 是否正在旋转中
			
 
				+
			
 
				+    this.forceStop = false;
			
 
				+}
			
 
				+RaffleRotate.prototype = {
			
 
				+    constructor: RaffleRotate,
			
 
				+    raffleRotaing: function() {
			
 
				+        var self = this;
			
 
				+        function rotating(timestamp) {
			
 
				+            if(self.forceStop) {
			
 
				+                self.forceStop = false;
			
 
				+                return;
			
 
				+            }
			
 
				+            if (self.preTimestamp === undefined) {
			
 
				+                self.preTimestamp = timestamp; // 初始化
			
 
				+            }
			
 
				+            var totalElapsed = timestamp - self.originalStartTimes; // 从动画开始到此刻的时间间隔
			
 
				+            var fps = timestamp - self.preTimestamp; // 两次requestAnimationFrame调用的时间间隔 屏幕刷新帧率
			
 
				+            // 从0速度开始加速直到maxSpeed
			
 
				+            self.deg = self.deg + self.easeIn(totalElapsed,0,self.maxSpeed,2000);
			
 
				+            self.deg = self.deg % 360; // 防止角度值过大
			
 
				+            // console.log(deg);
			
 
				+            if(self.rotateDom) {
			
 
				+                self.rotateDom.style.transform = 'rotate(' + self.deg + 'deg)';
			
 
				+            }
			
 
				+            self.preTimestamp = timestamp;
			
 
				+
			
 
				+            if(self.activePrize > 0) {
			
 
				+                self.easeOutTimer = timestamp;// Date.now();
			
 
				+
			
 
				+                // 开始减速时rotateDom转动的角度
			
 
				+                self.easeOutSatrtDeg = self.deg;
			
 
				+                let i = 0;
			
 
				+                while(++i) {
			
 
				+                    // 结合开始减速时所处的位置和结束时所处的位置计算旋转总路程
			
 
				+                    const endDeg = 360 * i - (self.activePrize * self.prizeDeg) - self.easeOutSatrtDeg;
			
 
				+
			
 
				+                    // 计算刚开始第一帧旋转的角度，也就是初始速度
			
 
				+                    const curSpeed = self.easeOut(fps, self.easeOutSatrtDeg, endDeg, 2000) - self.easeOutSatrtDeg;
			
 
				+
			
 
				+                    // 当初始速度与当前旋转最大速度相等，即可获取总共需要旋转的角度
			
 
				+                    if (curSpeed >= self.maxSpeed) {
			
 
				+                        self.easeOutEndDeg = endDeg;
			
 
				+                        break;
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+                // 开始减速
			
 
				+                return self.slowDown();
			
 
				+            }
			
 
				+            window.requestAnimationFrame(rotating);
			
 
				+        }
			
 
				+        window.requestAnimationFrame(function(timestamp) {
			
 
				+            self.originalStartTimes = timestamp;
			
 
				+            rotating(timestamp);
			
 
				+        });
			
 
				+    },
			
 
				+    slowDown: function () {
			
 
				+        var self = this;
			
 
				+        window.requestAnimationFrame(function(timestamp) {
			
 
				+            // 开始减速时刻到此时刻的时间间隔
			
 
				+            const timeInterval = timestamp - self.easeOutTimer;
			
 
				+
			
 
				+            // 减速完成
			
 
				+            if (timeInterval >= 2000) {
			
 
				+                self.isRotating = false;
			
 
				+                self.endCallback({
			
 
				+                    index: self.activePrize,
			
 
				+                    deg: self.deg
			
 
				+                });
			
 
				+                self.resetInit();
			
 
				+                return;
			
 
				+            }
			
 
				+
			
 
				+            // 缓出减速
			
 
				+            self.deg = self.easeOut(timeInterval, self.easeOutSatrtDeg, self.easeOutEndDeg, 2000) % 360;
			
 
				+            if(self.rotateDom) {
			
 
				+                self.rotateDom.style.transform = 'rotate('+ self.deg+ 'deg)';
			
 
				+            }
			
 
				+            self.slowDown();
			
 
				+        });
			
 
				+    },
			
 
				+    forceStopRotating: function() {
			
 
				+        this.forceStop = true;
			
 
				+    },
			
 
				+    setActivePrizeIndex: function(index) {
			
 
				+        this.activePrize = index;
			
 
				+    },
			
 
				+    resetInit: function() {
			
 
				+        this.forceStop = false;
			
 
				+        this.activePrize = 0;
			
 
				+    },
			
 
				+    // t:缓动开始时间 ms
			
 
				+    // b:缓动开始位置 deg
			
 
				+    // c:缓动移动的距离 deg
			
 
				+    // d:缓动持续的时间 ms
			
 
				+    // 结果值为当前位置值 deg
			
 
				+    // 缓入函数
			
 
				+    easeIn: function (t, b, c, d) {
			
 
				+        if (t >= d) t = d;
			
 
				+        // 除法赋值（/=）运算符将变量除以右操作数的值，并将结果赋值给该变量。
			
 
				+        return c * (t /= d) * t + b;
			
 
				+    },
			
 
				+    // 缓出函数
			
 
				+    easeOut: function  (t, b, c, d) {
			
 
				+        if (t >= d) t = d;
			
 
				+        return -c * (t /= d) * (t - 2) + b;
			
 
				+    }
			
 
				+};
			
 
				+
			
 
				+export { RaffleRotate }
			
--- a/src/util/request.js
+++ b/src/util/request.js
@@ -0,0 +1,112 @@
 
				+import * as axios from 'axios';
			
 
				+import { Toast } from 'vant';
			
 
				+const axiosInstance = axios.create({
			
 
				+    baseURL: '',// 'https://westkissapp.snjon.com/app-api',//'/app-api',//
			
 
				+    timeout: 1000000,
			
 
				+    headers: {
			
 
				+        // 'Content-Type': 'application/json; charset=utf-8'
			
 
				+        "Content-Type": "application/x-www-form-urlencoded"
			
 
				+    }
			
 
				+});
			
 
				+const env = process.env.NODE_ENV;
			
 
				+// console.log('process.env.NODE_ENV  --- qqwe',process.env.NODE_ENV );
			
 
				+/**
			
 
				+ * 响应的数据结构
			
 
				+{
			
 
				+  // `data` 由服务器提供的响应
			
 
				+  data: {},
			
 
				+
			
 
				+  // `status` 来自服务器响应的 HTTP 状态码
			
 
				+  status: 200,
			
 
				+
			
 
				+  // `statusText` 来自服务器响应的 HTTP 状态信息
			
 
				+  statusText: 'OK',
			
 
				+
			
 
				+  // `headers` 服务器响应的头
			
 
				+  headers: {},
			
 
				+
			
 
				+  // `config` 是为请求提供的配置信息
			
 
				+  config: {}
			
 
				+}
			
 
				+ */
			
 
				+
			
 
				+// 添加请求拦截器
			
 
				+axiosInstance.interceptors.request.use(function (config) {
			
 
				+    if(config.url !== '/api/raffle/raffle') {
			
 
				+        Toast.loading({
			
 
				+            message: 'Loading...',
			
 
				+            forbidClick: true,
			
 
				+        });
			
 
				+    }
			
 
				+    
			
 
				+    if(env === 'production') {
			
 
				+        let apiTypeReg = /(\/app\-api\/)|(\/api\/)/ig;
			
 
				+        let urlMap = {
			
 
				+            '/api/':'https://actapi.snjon.com',
			
 
				+            // 'https://actapi.longyihair.com',
			
 
				+            '/app-api/': 'https://ios.alipearlhair.com',
			
 
				+            // 'https://app.westkiss.com'
			
 
				+            // '/api/': 'https://actapi.snjon.com',
			
 
				+            // '/app-api/': 'https://westkissapp.snjon.com'
			
 
				+        };
			
 
				+        let urlType = config.url.match(apiTypeReg)[0];
			
 
				+        if(urlType) {
			
 
				+            config.url = urlMap[urlType] + config.url;
			
 
				+        }
			
 
				+    }
			
 
				+    
			
 
				+    if(config.method === 'post') {
			
 
				+        
			
 
				+        if(config.data && config.url.indexOf('/index/uploader') < 0) {
			
 
				+            let requestData = config.data;
			
 
				+            config.data = formdataPostParam(requestData);
			
 
				+        }
			
 
				+    } 
			
 
				+    // 添加token
			
 
				+    var userToken = window.sessionStorage.getItem('usertoken');
			
 
				+    if(userToken) {
			
 
				+        config.headers['token'] = userToken;
			
 
				+    }
			
 
				+    // console.log('request config --- ',config);
			
 
				+    return config;
			
 
				+}, function (error) {
			
 
				+    Toast.clear();
			
 
				+    // 对请求错误做些什么
			
 
				+    return Promise.reject(error);
			
 
				+});
			
 
				+
			
 
				+// 添加响应拦截器
			
 
				+axiosInstance.interceptors.response.use(function (response) {
			
 
				+    console.log('response == ',response);
			
 
				+    Toast.clear();
			
 
				+    if(response.status === 200) {
			
 
				+        if(response.data.code === 200 || response.data.code === 1) {
			
 
				+            return response.data;
			
 
				+        } else {
			
 
				+            if(response.config.url.indexOf('shareAdd') < 0) { 
			
 
				+                Toast({
			
 
				+                    message: response.data.msg,
			
 
				+                    // position: 'top',
			
 
				+                });
			
 
				+            }
			
 
				+            return Promise.reject(response.data);
			
 
				+        }
			
 
				+    }
			
 
				+    return Promise.reject(response.data);
			
 
				+}, function (error) {
			
 
				+    Toast.clear();
			
 
				+    // console.log(error,'kkkkkkkkkk');
			
 
				+    // 对响应错误做点什么
			
 
				+    return Promise.reject(error);
			
 
				+});
			
 
				+
			
 
				+// 序列化post请求数据
			
 
				+function formdataPostParam(data) {
			
 
				+    let res = '';
			
 
				+    for(let key in data) {
			
 
				+        res = res ? res + '&' + encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) : encodeURIComponent(key) + '=' + encodeURIComponent(data[key]);
			
 
				+    }
			
 
				+    // console.log('request-data: ',res);
			
 
				+    return res;
			
 
				+}
			
 
				+export default axiosInstance;
			
--- a/src/view/Home/Home.vue
+++ b/src/view/Home/Home.vue
--- a/src/view/Home/home.css
+++ b/src/view/Home/home.css
@@ -0,0 +1,747 @@
 
				+.lucky-wheel-page{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    padding-bottom: 1.0667rem;
			
 
				+}
			
 
				+.lucky-wheel-page-header{
			
 
				+    position: relative;
			
 
				+    width: 100%;
			
 
				+    height: 1.8666rem;
			
 
				+    text-align: center;
			
 
				+    line-height: 1.8666rem;
			
 
				+    background: #262626;
			
 
				+    box-shadow: 0px .08rem .16rem 1px rgba(0,0,0,0.16);
			
 
				+    font-size: .5333rem;
			
 
				+    font-weight: 400;
			
 
				+    color: #fff;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-page-header img{
			
 
				+    width: .5333rem;
			
 
				+    height: .5333rem;
			
 
				+    position: absolute;
			
 
				+    left: 0.8rem;
			
 
				+    top: 0.64rem;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-page-header .icon-share{
			
 
				+    flex: 0 0 auto;
			
 
				+    width: .5333rem;
			
 
				+    height: .5333rem;
			
 
				+    margin-left: 9px;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-body{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    background-image: url('https://cdn.alipearlhair.com/media/wysiwyg/zpage/1685757053.png ');
			
 
				+    background-position: 0 0;
			
 
				+    background-size: 100% auto;
			
 
				+    background-repeat: no-repeat;
			
 
				+    padding-top: .5333rem;
			
 
				+}
			
 
				+.lucky-wheel-top{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+}
			
 
				+.lucky-wheel-top-title{
			
 
				+    display: block;
			
 
				+    width: 6.4rem;
			
 
				+    height: 3.36rem;
			
 
				+    margin: auto;
			
 
				+    width: 95%;
			
 
				+}
			
 
				+.lucky-wheel-top-tips{
			
 
				+    font-size: .4267rem;
			
 
				+    font-weight: 400;
			
 
				+    color: #fff;
			
 
				+    margin-top: .32rem;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+.lucky-wheel-root{
			
 
				+    position: relative;
			
 
				+    box-sizing: border-box;
			
 
				+    width: 8.48rem;
			
 
				+    height: 8.48rem;
			
 
				+    margin: .5333rem auto 0 auto;
			
 
				+    background-image: url('https://cdn.alipearlhair.com/media/wysiwyg/zpage/1685757043.png');
			
 
				+    background-position: 0 0;
			
 
				+    background-size: 100% 100%;
			
 
				+    box-shadow: 0 .5333rem .5333rem 0px rgba(0,0,0,0.45);
			
 
				+    border-radius: 50%;
			
 
				+}
			
 
				+.lucky-wheel-box{
			
 
				+    position: absolute;
			
 
				+    top:0;
			
 
				+    left: 0;
			
 
				+    bottom:0;
			
 
				+    right:0;
			
 
				+    margin:auto;
			
 
				+    /* transform: translate3d(-50%, -50%, 0); */
			
 
				+    width: 7.6267rem;
			
 
				+    height: 7.6267rem;
			
 
				+    background-image: url('https://cdn.alipearlhair.com/media/wysiwyg/zpage/1685757044.png');
			
 
				+    background-position: 0 0;
			
 
				+    background-size: 100% 100%;
			
 
				+    /* transition-property: transform;
			
 
				+    transition-duration: 6s; */
			
 
				+}
			
 
				+.lucky-wheel-box[active="4"] .lucky-wheel-item.index-2{
			
 
				+    right: 1.1733rem
			
 
				+}
			
 
				+.lucky-wheel-box[active="4"] .lucky-wheel-item.index-5{
			
 
				+    left: .9867rem;
			
 
				+}
			
 
				+.lucky-wheel-box[active="5"] .lucky-wheel-item.index-1{
			
 
				+    left: 3.0133rem;
			
 
				+}
			
 
				+.lucky-wheel-box[active="5"] .lucky-wheel-item.index-2{
			
 
				+    right: 1.2533rem;
			
 
				+}
			
 
				+.lucky-wheel-box[active="1"] .lucky-wheel-item.index-2{
			
 
				+  top: 1.8667rem;
			
 
				+}
			
 
				+.lucky-wheel-box[active="1"] .lucky-wheel-item.index-5{
			
 
				+    top: 4.64rem;
			
 
				+}
			
 
				+.lucky-wheel-box[active="2"] .lucky-wheel-item.index-1{
			
 
				+    left: 3.0933rem;
			
 
				+    top: .5333rem;
			
 
				+}
			
 
				+.lucky-wheel-box[active="2"] .lucky-wheel-item.index-2{
			
 
				+    right: 1.2267rem;
			
 
				+}
			
 
				+.lucky-wheel-box[active="3"] .lucky-wheel-item.index-1{
			
 
				+    left: 3.2267rem;
			
 
				+}
			
 
				+.lucky-wheel-box[active="3"] .lucky-wheel-item.index-4{
			
 
				+    left: 3.3867rem;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-item{
			
 
				+    position: absolute;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    color: #fff;
			
 
				+    transform-origin: center center;
			
 
				+    line-height: 1;
			
 
				+}
			
 
				+.lucky-wheel-item-title{
			
 
				+    font-size: .64rem;
			
 
				+    font-weight: bold;
			
 
				+}
			
 
				+.lucky-wheel-item-label{
			
 
				+    font-size: .32rem;
			
 
				+    font-weight: 400;
			
 
				+    margin-top: .16rem;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-item.index-1[data-title="Thanks"]{
			
 
				+    transform: rotate(90deg) translateY(28px);
			
 
				+}
			
 
				+.lucky-wheel-item.index-2[data-title="Thanks"]{
			
 
				+    transform: rotate(150deg);
			
 
				+}
			
 
				+.lucky-wheel-item.index-3[data-title="Thanks"]{
			
 
				+    transform: rotate(-150deg) translateY(.2667rem);
			
 
				+}
			
 
				+.lucky-wheel-item.index-4[data-title="Thanks"]{
			
 
				+    transform: rotate(-90deg) translateY(-0.2667rem);
			
 
				+}
			
 
				+.lucky-wheel-item.index-5[data-title="Thanks"]{
			
 
				+    transform: rotate(-30deg) translateY(0.2667rem);
			
 
				+}
			
 
				+.lucky-wheel-item.index-6[data-title="Thanks"]{
			
 
				+    transform: rotate(30deg) translateY(0.5333rem);
			
 
				+}
			
 
				+.lucky-wheel-item[data-title="Thanks"]{
			
 
				+    transform: rotate(210deg);
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="1"]{
			
 
				+    top: .6667rem;
			
 
				+    left: 3.3067rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="2"]{
			
 
				+    top: 1.92rem;
			
 
				+    right: .9867rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="3"]{
			
 
				+    /* bottom: 1.8933rem; */
			
 
				+    top: 4.4267rem;
			
 
				+    right: .6933rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="4"]{
			
 
				+    left: 3.4667rem;
			
 
				+    top: 5.7067rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="5"]{
			
 
				+    left: .6933rem;
			
 
				+    /* bottom: 1.8933rem; */
			
 
				+    top: 4.4267rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="6"]{
			
 
				+    left: 1.0933rem;
			
 
				+    top: 1.92rem;
			
 
				+}
			
 
				+/*
			
 
				+.lucky-wheel-item[data-index="1"]{
			
 
				+    top: .6667rem;
			
 
				+    left: 3.3067rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="2"]{
			
 
				+    top: 1.92rem;
			
 
				+    right: .9867rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="3"]{
			
 
				+    top: 4.4rem;
			
 
				+    right: .6933rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="4"]{
			
 
				+    left: 3.3067rem;
			
 
				+    bottom: .6133rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="5"]{
			
 
				+    left: .6667rem;
			
 
				+    top: 4.4rem;
			
 
				+}
			
 
				+.lucky-wheel-item[data-index="6"]{
			
 
				+    left: 1.0933rem;
			
 
				+    top: 1.92rem;
			
 
				+}
			
 
				+*/
			
 
				+.lucky-wheel-star{
			
 
				+    display: block;
			
 
				+    width: 2.2933rem;
			
 
				+    height: 2.2933rem;
			
 
				+    top: -0.16rem;
			
 
				+    left: .4533rem;
			
 
				+}
			
 
				+.lucky-wheel-go{
			
 
				+    position:absolute;
			
 
				+    width: 2.5333rem;
			
 
				+    height: 2.9067rem;
			
 
				+    left: 50%;
			
 
				+    top: 50%;
			
 
				+    transform: translate3d(-50%, -50%, 0);
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-start-box{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    padding: 0 .3rem;
			
 
				+    margin-top: .5333rem;
			
 
				+}
			
 
				+.lucky-wheel-start-btn{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    height: 1.6rem;
			
 
				+    color:#000;
			
 
				+    border-radius: 4px;
			
 
				+    font-size: .4267rem;
			
 
				+    font-weight: bold;
			
 
				+    line-height: 1.6rem;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+.lucky-wheel-chance{
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+    font-size: 0.3733rem;
			
 
				+    line-height: 0.402rem;
			
 
				+    padding: 0 0.5333rem;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-chance-left div {
			
 
				+    width: 0.8267rem;
			
 
				+    height: 0.8267rem;
			
 
				+    border-radius: 0.2133rem;
			
 
				+    text-align: center;
			
 
				+    line-height: 0.8267rem;
			
 
				+    background: url("https://cdn.alipearlhair.com/media/wysiwyg/zpage/1685757046.png");
			
 
				+    background-repeat: no-repeat;
			
 
				+    background-size: cover;
			
 
				+    color: #fff;
			
 
				+    margin-bottom: 0.29rem;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-chance-right{
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    justify-content: flex-start;
			
 
				+    align-items: flex-end;
			
 
				+    padding-top: 0.25rem;
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-chance-right img {
			
 
				+    height: 0.6133rem;
			
 
				+    width: 0.6133rem;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-backcolor{
			
 
				+background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-list-section{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    padding: 0 .8rem;
			
 
				+    margin-top: .5333rem;
			
 
				+}
			
 
				+.lucky-wheel-list{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    height: 2.6667rem;
			
 
				+    background-image: url("https://cdn.alipearlhair.com/media/wysiwyg/zpage/1685757049.png");
			
 
				+    background-repeat: no-repeat;
			
 
				+    background-size: cover;
			
 
				+    border-radius: 8px;
			
 
				+    padding: .2133rem 0;
			
 
				+    overflow-y: hidden;
			
 
				+}
			
 
				+.lucky-wheel-list-inner{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+}
			
 
				+.lucky-wheel-list-inner.slidescroll{
			
 
				+    animation-name: slidescroll;
			
 
				+    animation-duration: 30s;
			
 
				+    animation-iteration-count: infinite;
			
 
				+    animation-timing-function: linear;
			
 
				+}
			
 
				+@keyframes slidescroll {
			
 
				+    0%{
			
 
				+        transform: translateY(0%);
			
 
				+    }
			
 
				+    50%{
			
 
				+        transform: translateY(-50% + 1.24005rem);
			
 
				+    }
			
 
				+    100%{
			
 
				+        transform: translateY(calc(-100% + 2.4801rem));
			
 
				+    }
			
 
				+}
			
 
				+.lucky-wheel-list-item{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    padding: 0.4rem .5333rem 0 .5333rem;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+    font-size: .32rem;
			
 
				+    font-weight: 400;
			
 
				+    color: #fff;
			
 
				+}
			
 
				+.lucky-wheel-list-item:first-child{
			
 
				+    margin-top: 0;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-rules-section{
			
 
				+    box-sizing: border-box;
			
 
				+    position: fixed;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    top: 0;
			
 
				+    background: rgba(0, 0, 0, 0.3);
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+}
			
 
				+.lucky-wheel-rules{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 83%;
			
 
				+    padding: .5333rem;
			
 
				+    background: #FFD1B9;
			
 
				+    padding-top: 0.8rem;
			
 
				+}
			
 
				+.lucky-wheel-rules-title{
			
 
				+    font-weight: 400;
			
 
				+    margin: 0.8rem 0 0.53333rem;
			
 
				+    font-size: .3733rem;
			
 
				+    font-weight: bold;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-rules-close {
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+}
			
 
				+
			
 
				+.lucky-wheel-rules-close img{
			
 
				+    width: 0.64rem;
			
 
				+    height: 0.64rem;
			
 
				+}
			
 
				+.lucky-wheel-rules-content{
			
 
				+    height: 6.8rem;
			
 
				+    overflow: auto;
			
 
				+}
			
 
				+.lucky-wheel-rules p{
			
 
				+    font-size: .3733rem;
			
 
				+    font-weight: 400;
			
 
				+    line-height: .5333rem;
			
 
				+}
			
 
				+.lucky-wheel-picked-section{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    margin-top: .5333rem;
			
 
				+}
			
 
				+.lucky-wheel-picked{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    padding: .5333rem 0rem;
			
 
				+    border-radius: 4px;
			
 
				+}
			
 
				+.lucky-wheel-picked-title{
			
 
				+    text-align: center;
			
 
				+    font-size: .7467rem;
			
 
				+    font-weight: 700;
			
 
				+    color: #000;
			
 
				+}
			
 
				+.lucky-wheel-picked-list{
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-between;
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+}
			
 
				+.lucky-wheel-picked-item{
			
 
				+    width: 48%;
			
 
				+    margin-top: .4rem;
			
 
				+}
			
 
				+.lucky-wheel-picked-item-info{
			
 
				+    text-align: center;
			
 
				+    width: 100%;
			
 
				+    padding: 0.2667rem;
			
 
				+    padding-top: 0.5333rem;
			
 
				+    position: relative;
			
 
				+    background: #fff5f0;
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+.lucky-wheel-picked-viewmore{
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    width: 4.2667rem;
			
 
				+    height: .9333rem;
			
 
				+    margin: .5333rem auto 0 auto;
			
 
				+    border: 1px solid #000;
			
 
				+    font-size: 0.48rem;
			
 
				+    font-weight: 400;
			
 
				+    color: #fff;
			
 
				+    background-color: #000;
			
 
				+}
			
 
				+.lucky-wheel-modal{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 8.2667rem;
			
 
				+    background-color: #fff;
			
 
				+    padding: .8rem .5333rem;
			
 
				+}
			
 
				+.lucky-wheel-modal-close{
			
 
				+    font-size: .64rem;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+.lucky-wheel-modal-notice{
			
 
				+    text-align: center;
			
 
				+    margin-top: .8rem;
			
 
				+    font-size: .3733rem;
			
 
				+    font-weight: 900;
			
 
				+}
			
 
				+.lucky-wheel-modal-des{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    margin-top: .8rem;
			
 
				+}
			
 
				+.lucky-wheel-modal-des p{
			
 
				+    text-align: center;
			
 
				+    font-size: .3733rem;
			
 
				+    font-weight: 400;
			
 
				+    line-height: .64rem;
			
 
				+}
			
 
				+.lucky-wheel-modal-btn{
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    width: 4.2667rem;
			
 
				+    height: .9333rem;
			
 
				+    margin: .8rem auto 0 auto;
			
 
				+    background-color: #000;
			
 
				+    color: #fff;
			
 
				+    font-size: .3733rem;
			
 
				+    font-weight: 500;
			
 
				+}
			
 
				+.lucky-wheel-modal-coupon{
			
 
				+    position: relative;
			
 
				+    box-sizing: border-box;
			
 
				+    width: 6.7467rem;
			
 
				+    margin: .8rem auto 0 auto;
			
 
				+    padding-left: .8533rem;
			
 
				+}
			
 
				+.lucky-wheel-modal-coupon-left{
			
 
				+    position: absolute;
			
 
				+    height: 2.4267rem;
			
 
				+    width: 1.12rem;
			
 
				+    background: #FF0827;
			
 
				+    border-radius: .32rem 0 0 .32rem;
			
 
				+    top:0;
			
 
				+    left:0;
			
 
				+    font-size: .5333rem;
			
 
				+    color: #b2051b;
			
 
				+    font-weight: 500;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+}
			
 
				+.lucky-wheel-modal-coupon-left span{
			
 
				+    transform: translateX(-5%) rotate(270deg);
			
 
				+}
			
 
				+.lucky-wheel-modal-coupon-right{
			
 
				+    position: relative;
			
 
				+    box-sizing: border-box;
			
 
				+    width: 5.8933rem;
			
 
				+    height: 2.4267rem;
			
 
				+    border-radius: .32rem 0 0 .32rem;
			
 
				+    background-color: #FFDEE2;
			
 
				+    z-index: 1;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+}
			
 
				+.lucky-wheel-modal-cinfo{
			
 
				+    flex: 0 0 auto;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    width: 4.6933rem;
			
 
				+    height: 100%;
			
 
				+    border-right: 1px dashed #999;
			
 
				+}
			
 
				+.lucky-wheel-modal-cinfo-title{
			
 
				+    font-size: .8533rem;
			
 
				+    font-weight: bold;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+.lucky-wheel-modal-cinfo-tips{
			
 
				+    font-size: .32rem;
			
 
				+    color: #0b0b0b;
			
 
				+    text-align: center;
			
 
				+    font-weight: 400;
			
 
				+    margin-top: .1867rem;
			
 
				+}
			
 
				+.lucky-wheel-modal-ccode{
			
 
				+    flex: 0 0 auto;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    width: 1.2rem;
			
 
				+    height: 100%;
			
 
				+}
			
 
				+.lucky-wheel-modal-ccode span{
			
 
				+    display: block;
			
 
				+    font-size: .32rem;
			
 
				+    font-weight: bold;
			
 
				+    transform: rotate(270deg);
			
 
				+    white-space: nowrap;
			
 
				+}
			
 
				+.lucky-wheel-modal-coupon-right .dot{
			
 
				+    position: absolute;
			
 
				+    width: .2667rem;
			
 
				+    height: .2667rem;
			
 
				+    border-radius: 50%;
			
 
				+    background-color: #fff;
			
 
				+}
			
 
				+.lucky-wheel-modal-coupon-right .dot.top{
			
 
				+    top:0;
			
 
				+    left: 4.6933rem;
			
 
				+    transform: translate3d(-50%, -50%, 0);
			
 
				+}
			
 
				+.lucky-wheel-modal-coupon-right .dot.bottom{
			
 
				+    bottom:0;
			
 
				+    left: 4.6933rem;
			
 
				+    transform: translate3d(-50%, 50%, 0);
			
 
				+}
			
 
				+.lucky-wheel-modal-points{
			
 
				+    text-align: center;
			
 
				+    font-size: 0;
			
 
				+    margin-top: .8rem;
			
 
				+}
			
 
				+.lucky-wheel-modal-points .icon{
			
 
				+    font-size: 1.6rem;
			
 
				+}
			
 
				+.lucky-wheel-modal-points span{
			
 
				+    font-size: 1.0667rem;
			
 
				+    font-weight: bold;
			
 
				+    margin-left: .2667rem;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+.lucky-wheel-toast{
			
 
				+    box-sizing: border-box;
			
 
				+    width: 4.8rem;
			
 
				+    padding: .8rem .5333rem;
			
 
				+    color: #fff;
			
 
				+}
			
 
				+.lucky-wheel-toast-close{
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    text-align: center;
			
 
				+    font-size: .64rem;
			
 
				+    line-height: 1;
			
 
				+}
			
 
				+.lucky-wheel-toast-close .icon{
			
 
				+    display:none;
			
 
				+}
			
 
				+.lucky-wheel-toast[type="error"] .lucky-wheel-toast-close .icon-error{
			
 
				+    display: block;
			
 
				+}
			
 
				+.lucky-wheel-toast[type="success"] .lucky-wheel-toast-close .icon-success{
			
 
				+    display: block;
			
 
				+}
			
 
				+.lucky-wheel-toast-content{
			
 
				+    margin-top: .2667rem;
			
 
				+    text-align: center;
			
 
				+    font-size: .3733rem;
			
 
				+    font-weight: 400;
			
 
				+    line-height: .64rem;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.productcard-item{
			
 
				+    display: block;
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    text-decoration: none;
			
 
				+  }
			
 
				+  .productcard-item-img{
			
 
				+    position: relative;
			
 
				+    display: block;
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+  .productcard-item-img img{
			
 
				+    display:block;
			
 
				+    width: 100%;
			
 
				+    height: auto;
			
 
				+  }
			
 
				+  .productcard-item-img .productcard-item-img-cornor{
			
 
				+    position: absolute;
			
 
				+    width: 4.7467rem;
			
 
				+    height: auto;
			
 
				+    top:0;
			
 
				+    right:0;
			
 
				+  }
			
 
				+  .productcard-item-percent{
			
 
				+    font-size: 0.4267rem;
			
 
				+    position: absolute;
			
 
				+    top: -6%;
			
 
				+    left: 50%;
			
 
				+    transform: translate(-50%, 0);
			
 
				+    width: 4rem;
			
 
				+    height: 0.5333rem;
			
 
				+    line-height: .64rem;
			
 
				+    text-transform: uppercase;
			
 
				+    background-color: #ffd1b9;
			
 
				+  }
			
 
				+  .productcard-item-category{
			
 
				+    font-size: 0.3733rem;
			
 
				+  }
			
 
				+  .productcard-item-name{
			
 
				+    font-size: 0.32rem;
			
 
				+    overflow: hidden;
			
 
				+    -o-text-overflow: ellipsis;
			
 
				+    text-overflow: ellipsis;
			
 
				+    display: -webkit-box;
			
 
				+    -webkit-line-clamp: 1;
			
 
				+    word-break: break-all;
			
 
				+    -webkit-box-orient: vertical;
			
 
				+    text-transform: uppercase;
			
 
				+    margin: 0.2667rem 0;
			
 
				+  }
			
 
				+  .productcard-item-price{
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    margin: 0.2667rem 0;
			
 
				+  }
			
 
				+  .productcard-item-nowprice{
			
 
				+    font-size: 0.4267rem;
			
 
				+    padding-right: 0.1333rem;
			
 
				+  }
			
 
				+  .productcard-item-lineprice{
			
 
				+    font-size: 0.32rem;
			
 
				+    text-decoration: line-through;
			
 
				+  }
			
 
				+  .productcard-item-num{
			
 
				+    font-size: 0.32rem;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    text-transform: uppercase;
			
 
				+    font-family: "Rokkitt-Medium";
			
 
				+  }
			
 
				+  .productcard-item-num .icon{
			
 
				+    width: .5333rem;
			
 
				+    height: .5333rem;
			
 
				+    margin-right: .08rem;
			
 
				+  }
			
 
				+  .productcard-item-shopnow.none{
			
 
				+    display:none;
			
 
				+  }
			
 
				+  .productcard-item-shopnow{
			
 
				+    text-align: center;
			
 
				+    margin-top: .2667rem;
			
 
				+    font-size:0;
			
 
				+  }
			
 
				+  .productcard-item-shopnow-a{
			
 
				+    font-size: .3733rem;
			
 
				+    color:#000000;
			
 
				+    line-height: 1em;
			
 
				+    text-decoration: underline;
			
 
				+  }
			
 
				+  .productcard-item-shopnow-a .icon{
			
 
				+    font-size: .48rem;
			
 
				+  }.productcard-item{
			
 
				+    display: block;
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    text-decoration: none;
			
 
				+  }
			
 
				+  .productcard-item-img{
			
 
				+    position: relative;
			
 
				+    display: block;
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+  .productcard-item-img img{
			
 
				+    display:block;
			
 
				+    width: 100%;
			
 
				+    height: auto;
			
 
				+  }
			
 
				+  .productcard-item-img .productcard-item-img-cornor{
			
 
				+    position: absolute;
			
 
				+    width: 4.7467rem;
			
 
				+    height: auto;
			
 
				+    top:0;
			
 
				+    right:0;
			
 
				+  }
			
 
				+  .productcard-item-shopnow.none{
			
 
				+    display:none;
			
 
				+  }
			
 
				+  .productcard-item-shopnow{
			
 
				+    text-align: center;
			
 
				+    margin-top: .2667rem;
			
 
				+    font-size:0;
			
 
				+  }
			
 
				+  .productcard-item-shopnow-a{
			
 
				+    font-size: .3733rem;
			
 
				+    color:#000000;
			
 
				+    line-height: 1em;
			
 
				+    text-decoration: underline;
			
 
				+  }
			
 
				+  .productcard-item-shopnow-a .icon{
			
 
				+    font-size: .48rem;
			
 
				+  }
			
 
				+
			
 
				+
			
--- 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 lang="scss">
			
 
				+@import "./test.scss";
			
 
				+</style>
			
--- a/src/view/Test/test.scss
+++ b/src/view/Test/test.scss
@@ -0,0 +1,67 @@
 
				+.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);
			
 
				+}
			
 
				+.rotating{
			
 
				+    // animation-name: rotaing;
			
 
				+    animation-timing-function: ease-in-out;
			
 
				+    // animation-duration: 8s;
			
 
				+    animation-name: rotating;
			
 
				+    animation-duration: 4s;
			
 
				+    // animation-iteration-count: infinite;
			
 
				+    // animation-direction: alternate ;
			
 
				+    animation-timing-function: ease-in;
			
 
				+ 
			
 
				+    animation-delay: 0s;
			
 
				+}
			
 
				+@keyframes rotating {
			
 
				+    0%{
			
 
				+        transform: rotate(0deg);
			
 
				+        // width: 0px;
			
 
				+    }
			
 
				+    50%{
			
 
				+        transform: rotate(1800deg);
			
 
				+        // width: 200px;
			
 
				+        background-color: pink;
			
 
				+    }
			
 
				+    100%{
			
 
				+        transform: rotate(3600deg);
			
 
				+        // width: 400px;
			
 
				+    }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+
			
 
				+#div3{
			
 
				+    width: 100px;
			
 
				+    height: 100px;
			
 
				+    background-color: pink;
			
 
				+    margin-bottom: 10px;
			
 
				+    animation-name: test3;
			
 
				+    animation-duration: 4s;
			
 
				+    animation-iteration-count: infinite;
			
 
				+    animation-direction: alternate ;
			
 
				+    animation-timing-function: ease-in;
			
 
				+    background-color: yellow;
			
 
				+    animation-delay: 0s;
			
 
				+
			
 
				+}
			
 
				+@keyframes test3{
			
 
				+   0%{
			
 
				+       width: 100px;
			
 
				+   }
			
 
				+   50%{width: 400px;background-color:red;}
			
 
				+   100%{
			
 
				+       width: 700px;
			
 
				+        animation-timing-function:linear;
			
 
				+   }
			
 
				+}
			
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,92 @@
 
				+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({
			
 
				+    base: './',
			
 
				+    build: {
			
 
				+      outDir: 'dist/luckywheel'
			
 
				+    },
			
 
				+    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: "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/, '')
			
 
				+        //   }
			
 
				+        }
			
 
				+    }
			
 
				+})