转盘抽奖最终版

src/main.js

@@ -12,7 +12,7 @@ const app = Vue.createApp(App);
 
 var userToken = bridge.call('gettoken');
 // var userCookie =bridge.call('getCookie');
-// var userToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsYXQiOjE2OTE0ODMwMTEsIm5iZiI6MTY5MTQ4MzAxMSwiZXhwIjoxNjkxOTE1MDExLCJ1aWQiOiIxNjE0NDIiLCJ3ZWJzaXRlIjoiYWxpcGVhcmxoYWlyIn0.z4fgRskKFVspisnSKa-1b9fVDiX9kyrSnT38T5gFL_8";
+// var userToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsYXQiOjE2OTMwMjAzMTksIm5iZiI6MTY5MzAyMDMxOSwiZXhwIjoxNjkzNDUyMzE5LCJ1aWQiOiIxNjE0NDIiLCJ3ZWJzaXRlIjoiYWxpcGVhcmxoYWlyIn0.0LUfGmyPiPX3c9UMQjMWOApGjfl4d7TKmkrFKtdQ4xY";
 // var userToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsYXQiOjE2ODYxMjk3ODEsIm5iZiI6MTY4NjEyOTc4MSwiZXhwIjoxNjg2NTYxNzgxLCJ1aWQiOiIxNjEzMjciLCJ3ZWJzaXRlIjoiYWxpcGVhcmxoYWlyIn0.nlquLgwNulrTUeECyr4CQROtOJijy99AwWehrh7IJHc";
 // var userCookie =  "frontend=tcr49m50c7j34ei4vdvtgf5vs4;";
 

src/view/Home/home.css

@@ -1,3 +1,68 @@
+/* 基础字体 */
+@font-face {
+    font-family: "Rokkitt-Regular";
+    src: url("/src/fontFamily/Rokkitt-Regular.ttf");
+    font-style: normal;
+    font-weight: normal;
+  }
+  /* 大标题字体 */
+  @font-face {
+    font-family: "Rokkitt-Bold";
+    src: url("/src/fontFamily/Rokkitt-Bold.ttf");
+    font-style: normal;
+    font-weight: normal;
+  }
+  /* 内容标题字体 */
+  @font-face {
+    font-family: "Rokkitt-Medium";
+    src: url("/src/fontFamily/Rokkitt-Medium.ttf");
+    font-style: normal;
+    font-weight: normal;
+  }
+  @font-face {
+    font-family: "Rokkitt-Light";
+    src: url("/src/fontFamily/Rokkitt-Light.ttf");
+    font-style: normal;
+    font-weight: normal;
+  }
+  @font-face {
+    font-family: "Rokkitt-Thin";
+    src: url("/src/fontFamily/Rokkitt-Thin.ttf");
+    font-style: normal;
+    font-weight: normal;
+  }
+#app{
+    font-family: "Rokkitt-Regular", Roboto, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+}
+body {
+    font-family: "Rokkitt-Regular", Roboto, -apple-system,
+      BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  }
+.font-medium {
+    font-family: "Rokkitt-Medium";
+  }
+.font-blod {
+    font-family: "Rokkitt-Bold";
+  }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Rokkitt-Bold";
+}
+textarea,
+input,
+select,
+button {
+  font-family: "Rokkitt-Regular", Roboto, -apple-system,
+  BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+}
 .lucky-wheel-page{
     box-sizing: border-box;
     width: 100%;
@@ -457,7 +522,7 @@ background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
 .lucky-wheel-modal{
     box-sizing: border-box;
     width: 8.2667rem;
-    background-color: #fff;
+    background-color: #FFD1B9;
     padding: .8rem .5333rem;
 }
 .lucky-wheel-modal-close{
@@ -498,7 +563,7 @@ background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
     box-sizing: border-box;
     width: 6.7467rem;
     margin: .8rem auto 0 auto;
-    padding-left: .8533rem;
+    padding-left: .2rem;
 }
 .lucky-wheel-modal-coupon-left{
     position: absolute;
@@ -521,29 +586,34 @@ background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
 .lucky-wheel-modal-coupon-right{
     position: relative;
     box-sizing: border-box;
-    width: 5.8933rem;
+    width: 6.4933rem;
     height: 2.4267rem;
-    border-radius: .32rem 0 0 .32rem;
-    background-color: #FFDEE2;
+    color: #fff;
+    /* border-radius: .32rem 0 0 .32rem; */
+    /* background-color: #FFDEE2; */
     z-index: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    background-image: url(https://cdn.alipearlhair.com/media/wysiwyg/zpage/1693014053.png);
+    background-size: cover;
+    padding-right: 0.3rem;
 }
 .lucky-wheel-modal-cinfo{
     flex: 0 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: 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;
+    border-right: 2px dashed #fff;
 }
 .lucky-wheel-modal-cinfo-title[data-country="CAD"] {
     font-size: .65rem;
@@ -553,10 +623,12 @@ background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
 }
 .lucky-wheel-modal-cinfo-tips{
     font-size: .32rem;
-    color: #0b0b0b;
-    text-align: center;
+    /* color: #0b0b0b; */
+    /* text-align: center; */
+    text-indent: 2.5em;
     font-weight: 400;
-    margin-top: .1867rem;
+    padding-top: .1867rem;
+    border-right: 2px dashed #fff;
 }
 .lucky-wheel-modal-ccode{
     flex: 0 0 auto;
@@ -569,9 +641,10 @@ background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
 .lucky-wheel-modal-ccode span{
     display: block;
     font-size: .32rem;
-    font-weight: 500;
+    /* font-weight: bold; */
     transform: rotate(270deg);
     white-space: nowrap;
+    text-align: center;
 }
 .lucky-wheel-modal-coupon-right .dot{
     position: absolute;
@@ -666,14 +739,15 @@ background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
     top: -6%;
     left: 50%;
     transform: translate(-50%, 0);
-    width: 4rem;
+    width: 3.5rem;
     height: 0.5333rem;
     line-height: .64rem;
-    text-transform: uppercase;
+    /* text-transform: uppercase; */
     background-color: #ffd1b9;
+    font-weight: 700;
   }
   .productcard-item-category{
-    font-size: 0.3733rem;
+    font-size: 0.3rem;
   }
   .productcard-item-name{
     font-size: 0.32rem;
@@ -684,7 +758,7 @@ background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
     -webkit-line-clamp: 1;
     word-break: break-all;
     -webkit-box-orient: vertical;
-    text-transform: uppercase;
+    /* text-transform: uppercase; */
     margin: 0.2667rem 0;
   }
   .productcard-item-price{
@@ -706,8 +780,7 @@ background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
     display: flex;
     align-items: center;
     justify-content: center;
-    text-transform: uppercase;
-    font-family: "Rokkitt-Medium";
+    /* text-transform: uppercase; */
   }
   .productcard-item-num .icon{
     width: .3733rem;
@@ -770,5 +843,10 @@ background: linear-gradient(336deg, #FEDFA9 0%, #E0B17E 100%);
   .productcard-item-shopnow-a .icon{
     font-size: .48rem;
   }
-
+.lucky-wheel-modal-nopoint{
+    margin-top: 0.4rem;
+    font-size: 0.48rem;
+    text-align: center;
+    font-weight: bold;
+}
 

vite.config.js

@@ -66,7 +66,7 @@ export default defineConfig({
         //   '/api': 'http://www.myblog.com/api',
           // 选项写法
           '/app-api': {
-            target: 'https:alipearlapp.snjon.com',
+            target:"https://ios.alipearlhair.com",// 'https:alipearlapp.snjon.com',
             // "https://ios.alipearlhair.com",//正式站    'http://www.myblog.com',
             changeOrigin: true, // 设置成false报错
             // rewrite: (path) => {