init

.drone.yml

@@ -0,0 +1,154 @@
+kind: pipeline
+type: docker
+name: default
+
+steps:
+  - name: 测试服-依赖安装&&编译打包
+    pull: if-not-exists
+    image: node:20
+    when:
+      branch:
+        - test
+    commands:
+      - npm config set registry https://registry.npmmirror.com/
+      - npm install -g pnpm
+      - pnpm install
+      - pnpm build:h5:test
+      - rm -rf dist.tar
+      - rm -rf node_modules
+      - tar -zcvf dist.tar ./dist ./default.conf ./Dockerfile
+
+  - name: 正式服-依赖安装&&编译打包
+    pull: if-not-exists
+    image: node:20
+    when:
+      branch:
+        - master
+    commands:
+      - npm config set registry https://registry.npmmirror.com/
+      - npm install -g pnpm
+      - pnpm install
+      - pnpm build:h5
+      - rm -rf dist.tar
+      - rm -rf node_modules
+      - tar -zcvf dist.tar ./dist ./default.conf ./Dockerfile
+
+  - name: 测试服-产物上传
+    pull: if-not-exists
+    image: appleboy/drone-scp
+    when:
+      branch:
+        - test
+    settings:
+      host:
+        from_secret: HOST_DEV
+      username:
+        from_secret: USER_DEV
+      password:
+        from_secret: PWD_DEV
+      port: 22
+      strip_components: 1
+      target: /www/builder
+      source:
+        - ./dist.tar
+
+  - name: 测试服-部署
+    pull: if-not-exists
+    image: appleboy/drone-ssh
+    when:
+      branch:
+        - test
+    settings:
+      host:
+        from_secret: HOST_DEV
+      username:
+        from_secret: USER_DEV
+      password:
+        from_secret: PWD_DEV
+      port: 22
+      script:
+        - cd /www/builder
+        - mkdir jdt-aoshi-dev
+        - tar -xzvf dist.tar -C /www/builder/jdt-aoshi-dev
+        - rm -rf dist.tar
+        - cd jdt-aoshi-dev
+        - docker build -t jdt-aoshi-dev .
+        - docker stop jdt-aoshi-dev
+        - docker rm jdt-aoshi-dev
+        - docker run -d -p 5000:80 --restart=always --name jdt-aoshi-dev jdt-aoshi-dev
+        - cd ..
+        - rm -rf jdt-aoshi-dev
+
+  - name: 正式服-产物上传
+    pull: if-not-exists
+    image: appleboy/drone-scp
+    when:
+      branch:
+        - master
+    settings:
+      host:
+        from_secret: HOST_PROD
+      username:
+        from_secret: USER_PROD
+      password:
+        from_secret: PWD_PROD
+      port: 22
+      strip_components: 1
+      target: /www/builder
+      source:
+        - ./dist.tar
+
+  - name: 正式服-部署
+    pull: if-not-exists
+    image: appleboy/drone-ssh
+    when:
+      branch:
+        - master
+    settings:
+      host:
+        from_secret: HOST_PROD
+      username:
+        from_secret: USER_PROD
+      password:
+        from_secret: PWD_PROD
+      port: 22
+      script:
+        - cd /www/builder
+        - mkdir jdt-tz-prod
+        - tar -xzvf dist.tar -C /www/builder/jdt-tz-prod
+        - rm -rf dist.tar
+        - cd jdt-tz-prod
+        - docker build -t jdt-tz-prod .
+        - docker stop jdt-tz-prod
+        - docker rm jdt-tz-prod
+        - docker run -d -p 5000:80 --restart=always --name jdt-tz-prod jdt-tz-prod
+        - cd ..
+        - rm -rf jdt-tz-prod
+
+  - name: 企业微信通知
+    pull: if-not-exists
+    image: plugins/webhook
+    when:
+      branch:
+        - test
+        - master
+      status:
+        - success
+        - failure
+    settings:
+      urls: https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=a2065e21-4f92-4f5b-a432-2c0cd1d965b5
+      content_type: application/json
+      template: |
+        {
+          "msgtype": "markdown",
+          "markdown": {
+              "content": "{{#success build.status}}✅{{else}}❌{{/success}}**{{ repo.owner }}/{{ repo.name }}** (Build #{{build.number}})\n
+                          >**构建结果**: {{ build.status }}
+                          >**构建详情**: [点击查看]({{ build.link }})
+                          >**代码分支**: {{ build.branch }}
+                          >**提交标识**: {{ build.commit }}
+                          >**提交发起**: {{ build.author }}
+                          >**提交信息**: {{ build.message }}
+        "
+          }
+        }

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.env.development

@@ -0,0 +1,4 @@
+# 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
+# TARO_APP_ID="开发环境下的小程序appid"
+
+TARO_APP_AOSHI_API = 'https://game3.wanzhuanyongcheng.cn'

.env.production

@@ -0,0 +1,4 @@
+# TARO_APP_ID="生产环境下的小程序appid"
+
+# 澳拾
+TARO_APP_AOSHI_API = 'https://australia.jdt168.com'

.env.test

@@ -0,0 +1,3 @@
+# TARO_APP_ID="测试环境下的小程序appid"
+
+TARO_APP_AOSHI_API = 'https://game3.wanzhuanyongcheng.cn'

.eslintrc

@@ -0,0 +1,8 @@
+// ESLint 检查 .vue 文件需要单独配置编辑器：
+// https://eslint.vuejs.org/user-guide/#editor-integrations
+{
+  "extends": ["taro/vue3"],
+  "rules": {
+    "vue/multi-word-component-names": "off"
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc

Dockerfile

@@ -0,0 +1,5 @@
+FROM nginx:alpine
+
+COPY dist/ /usr/share/nginx/html
+
+COPY default.conf /etc/nginx/conf.d/default.conf

__tests__/index.test.js

@@ -0,0 +1,10 @@
+import TestUtils from "@tarojs/test-utils-vue3";
+
+describe("Testing", () => {
+  test("Test", async () => {
+    const testUtils = new TestUtils();
+    await testUtils.createApp();
+    await testUtils.PageLifecycle.onShow("pages/index/index");
+    expect(testUtils.html()).toMatchSnapshot();
+  });
+});

babel.config.js

@@ -0,0 +1,13 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    [
+      "taro",
+      {
+        framework: "vue3",
+        ts: false,
+      },
+    ],
+  ],
+};

config/dev.js

@@ -0,0 +1,8 @@
+export default {
+  logger: {
+    quiet: false,
+    stats: true,
+  },
+  mini: {},
+  h5: {},
+};

config/index.js

@@ -0,0 +1,97 @@
+import { defineConfig } from "@tarojs/cli";
+import { join } from "node:path";
+
+import devConfig from "./dev";
+import prodConfig from "./prod";
+
+// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
+export default defineConfig(async (merge, { command, mode }) => {
+  const baseConfig = {
+    projectName: "jdt-aoshi",
+    date: "2024-11-18",
+    designWidth: 750,
+    deviceRatio: {
+      640: 2.34 / 2,
+      750: 1,
+      375: 2,
+      828: 1.81 / 2,
+    },
+    sourceRoot: "src",
+    outputRoot: "dist",
+    plugins: [],
+    defineConstants: {},
+    copy: {
+      patterns: [],
+      options: {},
+    },
+    framework: "vue3",
+    compiler: "webpack5",
+    cache: {
+      enable: false, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+    },
+    alias: {
+      "@": join(__dirname, "..", "src"),
+    },
+    mini: {
+      postcss: {
+        pxtransform: {
+          enable: true,
+          config: {},
+        },
+        url: {
+          enable: true,
+          config: {
+            limit: 1024, // 设定转换尺寸上限
+          },
+        },
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          config: {
+            namingPattern: "module", // 转换模式，取值为 global/module
+            generateScopedName: "[name]__[local]___[hash:base64:5]",
+          },
+        },
+      },
+    },
+    h5: {
+      publicPath: "/",
+      staticDirectory: "static",
+      output: {
+        filename: "js/[name].[hash:8].js",
+        chunkFilename: "js/[name].[chunkhash:8].js",
+      },
+      miniCssExtractPluginOption: {
+        ignoreOrder: true,
+        filename: "css/[name].[hash].css",
+        chunkFilename: "css/[name].[chunkhash].css",
+      },
+      postcss: {
+        autoprefixer: {
+          enable: true,
+          config: {},
+        },
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          config: {
+            namingPattern: "module", // 转换模式，取值为 global/module
+            generateScopedName: "[name]__[local]___[hash:base64:5]",
+          },
+        },
+      },
+    },
+    rn: {
+      appName: "taroDemo",
+      postcss: {
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        },
+      },
+    },
+  };
+  if (process.env.NODE_ENV === "development") {
+    // 本地开发构建配置（不混淆压缩）
+    return merge({}, baseConfig, devConfig);
+  }
+  // 生产构建配置（默认开启压缩混淆等）
+  return merge({}, baseConfig, prodConfig);
+});

config/prod.js

@@ -0,0 +1,31 @@
+export default {
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  },
+};

default.conf

@@ -0,0 +1,18 @@
+server {
+  # 监听ipv4
+  listen 80;
+  # 监听ipv6
+  listen [::]:80;
+  server_name localhost;
+
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html;
+  }
+
+  error_page 500 502 503 504 /50x.html;
+  location = /50x.html {
+    root /usr/share/nginx/html;
+  }
+}

jest.config.js

@@ -0,0 +1,7 @@
+const defineJestConfig =
+  require("@tarojs/test-utils-vue3/dist/jest.js").default;
+
+module.exports = defineJestConfig({
+  testEnvironment: "jsdom",
+  testMatch: ["<rootDir>/__tests__/**/*.(spec|test).[jt]s?(x)"],
+});

package.json

@@ -0,0 +1,87 @@
+{
+  "name": "jdt-aoshi",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "templateInfo": {
+    "name": "default",
+    "typescript": false,
+    "css": "Sass",
+    "framework": "Vue3"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "build:harmony-hybrid": "taro build --type harmony-hybrid",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch",
+    "dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch",
+    "test": "jest",
+    "lf": "npx prettier --write --end-of-line lf ."
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.21.5",
+    "@tarojs/components": "3.6.35",
+    "@tarojs/helper": "3.6.35",
+    "@tarojs/plugin-framework-vue3": "3.6.35",
+    "@tarojs/plugin-platform-alipay": "3.6.35",
+    "@tarojs/plugin-platform-h5": "3.6.35",
+    "@tarojs/plugin-platform-harmony-hybrid": "3.6.35",
+    "@tarojs/plugin-platform-jd": "3.6.35",
+    "@tarojs/plugin-platform-qq": "3.6.35",
+    "@tarojs/plugin-platform-swan": "3.6.35",
+    "@tarojs/plugin-platform-tt": "3.6.35",
+    "@tarojs/plugin-platform-weapp": "3.6.35",
+    "@tarojs/runtime": "3.6.35",
+    "@tarojs/shared": "3.6.35",
+    "@tarojs/taro": "3.6.35",
+    "dayjs": "^1.11.13",
+    "lottie-web": "^5.12.2",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@tarojs/cli": "3.6.35",
+    "@tarojs/taro-loader": "3.6.35",
+    "@tarojs/test-utils-vue3": "^0.1.1",
+    "@tarojs/webpack5-runner": "3.6.35",
+    "@types/jest": "^29.3.1",
+    "@types/node": "^18.15.11",
+    "@types/webpack-env": "^1.13.6",
+    "@vue/babel-plugin-jsx": "^1.0.6",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-preset-taro": "3.6.35",
+    "css-loader": "3.4.2",
+    "eslint": "^8.12.0",
+    "eslint-config-taro": "3.6.35",
+    "eslint-plugin-vue": "^8.0.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.5.0",
+    "postcss": "^8.4.18",
+    "style-loader": "1.3.0",
+    "stylelint": "^14.4.0",
+    "ts-node": "^10.9.1",
+    "vue-loader": "^17.1.0",
+    "webpack": "5.78.0"
+  }
+}

project.config.json

@@ -0,0 +1,15 @@
+{
+  "miniprogramRoot": "./dist",
+  "projectname": "jdt-aoshi",
+  "description": "",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

project.tt.json

@@ -0,0 +1,9 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "jdt-aoshi",
+  "appid": "testAppId",
+  "setting": {
+    "es6": false,
+    "minified": false
+  }
+}

src/app.config.js

@@ -0,0 +1,9 @@
+export default defineAppConfig({
+  pages: ["pages/aoshi/index", "pages/aoshi/records/index"],
+  window: {
+    backgroundTextStyle: "light",
+    navigationBarBackgroundColor: "#fff",
+    navigationBarTitleText: "澳拾幸运大转盘",
+    navigationBarTextStyle: "black",
+  },
+});

src/app.js

@@ -0,0 +1,13 @@
+import { createApp } from "vue";
+import Taro from "@tarojs/taro";
+import "./app.scss";
+
+const App = createApp({
+  onLaunch({ query }) {
+    Taro.setStorageSync("uid", query.uid);
+    Taro.setStorageSync("id", query.id);
+  },
+  onShow(options) {},
+});
+
+export default App;

src/components/Popup.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class="mask" v-if="show" @click="isShowFn">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits(["isShow"]);
+
+const isShowFn = () => {
+  emits("isShow");
+};
+</script>
+
+<style lang="scss">
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+}
+</style>

src/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+    <meta
+      content="width=device-width,initial-scale=1,user-scalable=no"
+      name="viewport"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-touch-fullscreen" content="yes" />
+    <meta name="format-detection" content="telephone=no,address=no" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>jdt-aoshi</title>
+    <script>
+      <%= htmlWebpackPlugin.options.script %>
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

src/pages/aoshi/index/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "澳拾幸运大转盘",
+});

src/pages/aoshi/index/index.scss

@@ -0,0 +1,567 @@
+body {
+  line-height: 1;
+}
+
+.page {
+  background-image: url("../../../static/bg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 100dvh;
+  overflow: hidden;
+  position: relative;
+
+  .header {
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+
+    .left-box {
+      width: 378px;
+      height: 40px;
+      background: linear-gradient(90deg, #d19116 65%, #330706 95%);
+
+      .text {
+        background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+        -webkit-background-clip: text;
+        color: transparent;
+        font-size: 25px;
+        font-weight: bold;
+      }
+    }
+
+    .right-box {
+      display: flex;
+
+      .btn {
+        background-size: 100% 100%;
+        width: 149px;
+        height: 46px;
+
+        &:active {
+          animation: btnClick 0.1s ease-in-out;
+        }
+      }
+
+      .tz-btn {
+        background-image: url("../../../static/tz_btn.png");
+        transform-origin: center center;
+      }
+
+      .kj-btn {
+        background-image: url("../../../static/kj_btn.png");
+        transform-origin: center center;
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .user-box {
+    width: 646px;
+    height: 115px;
+    background: rgba(98, 98, 98, 0.3);
+    border-radius: 30px;
+    margin: 35px auto;
+    position: relative;
+    backdrop-filter: blur(10px);
+
+    .avatar-box {
+      position: absolute;
+      left: -5%;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 120px;
+      height: 120px;
+
+      .bg {
+        background-image: url("../../../static/avatar_border.png");
+        background-size: 100% 100%;
+        border-radius: 50%;
+        width: 120px;
+        height: 120px;
+        animation: bgRevolve 10s linear infinite;
+        transform-origin: center;
+      }
+
+      .avatar {
+        position: absolute;
+        width: 92px;
+        height: 92px;
+        border-radius: 50%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .user-info {
+      position: absolute;
+      left: 100px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+      -webkit-background-clip: text;
+      color: transparent;
+
+      .name {
+        font-size: 30px;
+        font-weight: bold;
+      }
+
+      .jf {
+        margin-top: 20px;
+        font-size: 28px;
+      }
+    }
+
+    .dz-box {
+      position: absolute;
+      right: 160px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+
+      .dz-bg {
+        background-image: url("../../../static/dz.png");
+        background-size: 100% 100%;
+        width: 55px;
+        height: 55px;
+      }
+
+      .text {
+        background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+        -webkit-background-clip: text;
+        color: transparent;
+        font-weight: bold;
+      }
+    }
+
+    .rule-btn {
+      position: absolute;
+      right: -8%;
+      top: 45%;
+      transform: translateY(-50%);
+      background-image: url("../../../static/rule_btn.png");
+      background-size: 100% 100%;
+      width: 173px;
+      height: 176px;
+      transform-origin: center center;
+
+      &:active {
+        animation: ruleBtnClick 0.1s ease-in-out;
+      }
+    }
+  }
+
+  .kj-box {
+    text-align: center;
+    margin-top: -10px;
+
+    .title {
+      background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+      -webkit-background-clip: text;
+      color: transparent;
+      font-size: 40px;
+      font-weight: bold;
+    }
+
+    .num-box {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+
+      .item {
+        background-image: url("../../../static/num.png");
+        background-size: 100% 100%;
+        width: 72px;
+        height: 72px;
+        text-align: center;
+        line-height: 72px;
+        font-weight: bold;
+        color: #b2150b;
+      }
+
+      .item:nth-child(1) {
+        color: #000;
+      }
+
+      .item:nth-child(2) {
+        color: #000;
+      }
+    }
+  }
+
+  .turntable-box {
+    position: relative;
+    height: 670px;
+    overflow: hidden;
+
+    .star {
+      position: absolute;
+      animation: starFlashing 1s ease-in-out infinite alternate;
+    }
+
+    .star-1 {
+      left: 100px;
+      width: 139px;
+      height: 171px;
+      background-image: url("../../../static/1-1.png");
+      background-size: 100% 100%;
+    }
+
+    .star-2 {
+      top: 100px;
+      width: 205px;
+      height: 251px;
+      background-image: url("../../../static/1-2.png");
+      background-size: 100% 100%;
+    }
+
+    .star-3 {
+      right: 50px;
+      width: 205px;
+      height: 251px;
+      background-image: url("../../../static/2-2.png");
+      background-size: 100% 100%;
+    }
+
+    .star-4 {
+      top: 200px;
+      right: 0;
+      width: 140px;
+      height: 171px;
+      background-image: url("../../../static/2-1.png");
+      background-size: 100% 100%;
+    }
+
+    .turntable-wrap {
+      background-image: url("../../../static/turntable_bg.png");
+      background-size: 100% 100%;
+      width: 650px;
+      height: 650px;
+      position: relative;
+      border-radius: 50%;
+      transform-origin: center center;
+      left: 50%;
+      top: 20px;
+      transform: translateX(-50%);
+      overflow: hidden;
+      //animation: turntableRevolve 5s linear infinite;
+
+      .light {
+        .lightItem {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          margin: 0 auto;
+          width: 10px;
+          height: 100%;
+          border-radius: 50%;
+          transform-origin: center center;
+
+          &::before {
+            content: "";
+            position: absolute;
+            top: 4px;
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            box-sizing: border-box;
+          }
+        }
+
+        .lightItem:nth-of-type(even):before {
+          background: transparent;
+          animation: white-to-yellow 1.5s linear infinite;
+        }
+
+        .lightItem:nth-of-type(odd):before {
+          background: #fefc87;
+          animation: white-to-yellow 1.5s linear reverse infinite;
+        }
+      }
+
+      .turntable {
+        position: absolute;
+        width: 530px;
+        height: 530px;
+        border-radius: 50%;
+        // background: url('../../../static/wu.png') no-repeat;
+        // background-size: contain;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) rotate(-0.8deg);
+
+        .prize {
+          position: absolute;
+          width: 300px;
+          height: 300px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%) rotate(-200deg);
+
+          .item {
+            position: absolute;
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            color: #000;
+            text-align: center;
+            transform-origin: right bottom;
+
+            &:nth-child(1) {
+              top: -10px;
+              transform: rotate(70deg);
+            }
+
+            &:nth-child(2) {
+              top: -10px;
+              left: -10px;
+              transform: rotate(-60deg);
+            }
+
+            &:nth-child(3) {
+              top: 10px;
+              left: 10px;
+              transform: rotate(190deg);
+            }
+
+            .img {
+              display: block;
+              width: 100px;
+              height: 100px;
+              transform: rotate(-45deg) scale(1.1);
+            }
+
+            .icon {
+              position: absolute;
+              background-image: url("../../../static/dz.png");
+              background-size: 100% 100%;
+              width: 50px;
+              height: 50px;
+              transform: rotate(-45deg) scale(1.6);
+              top: -10px;
+            }
+          }
+        }
+      }
+    }
+
+    .bet-btn {
+      position: absolute;
+      background-image: url("../../../static/bet_btn.png");
+      background-size: 100% 100%;
+      width: 150px;
+      height: 150px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      //&:active {
+      //  animation: betBtnClick .1s ease-in-out;
+      //}
+    }
+
+    .pointer {
+      position: absolute;
+      background-image: url("../../../static/pointer.png");
+      background-size: 100% 100%;
+      width: 47px;
+      height: 111px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .countdown-box {
+    margin-top: 30px;
+    background-image: url("../../../static/countdown_bg.png");
+    background-size: 100% 100%;
+    width: 750px;
+    height: 96px;
+    text-align: center;
+    line-height: 96px;
+
+    .title {
+      font-size: 38px;
+      font-weight: bold;
+      color: #b81801;
+      text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
+        2px 2px 0 #fff;
+    }
+  }
+
+  .footer-box {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+    margin-top: 30px;
+
+    .item {
+      background-size: 100% 100%;
+      width: 220px;
+      min-width: 220px;
+      height: 75px;
+      display: flex;
+      align-items: center;
+      margin: 10px auto;
+
+      .icon {
+        background-image: url("../../../static/dz.png");
+        background-size: 100% 100%;
+        width: 55px;
+        height: 55px;
+        margin: auto 15px;
+      }
+
+      .name {
+        background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+        -webkit-background-clip: text;
+        -webkit-text-stroke: 2px #000;
+        color: transparent;
+        font-size: 40px;
+        font-weight: bold;
+      }
+    }
+
+    .item-active {
+      background-image: url("../../../static/dz_active.png");
+    }
+
+    .item-no-active {
+      background-image: url("../../../static/dz_opt.png");
+    }
+  }
+
+  #lottie {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+
+    .lottie-text {
+      position: absolute;
+      top: 59%;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #b81801;
+      text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
+        2px 2px 0 #fff;
+      font-size: 80px;
+      font-weight: bold;
+    }
+
+    .lottie-bg {
+      position: absolute;
+      left: 50%;
+      bottom: 5%;
+      transform: translateX(-50%);
+      background-image: url("../../../static/img_0.png");
+      background-size: 100% 100%;
+      // width: 700px;
+      height: 300px;
+      animation: lottie 0.3s linear forwards;
+      text-align: center;
+      line-height: 310px;
+      overflow: hidden;
+
+      .lottie-num {
+        color: #b81801;
+        text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
+          2px 2px 0 #fff;
+        font-size: 60px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+@keyframes btnClick {
+  from {
+    transform: scale(1);
+  }
+
+  to {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes betBtnClick {
+  from {
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  to {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+}
+
+@keyframes ruleBtnClick {
+  from {
+    transform: scale(1) translateY(-50%);
+  }
+
+  to {
+    transform: scale(1.1) translateY(-50%);
+  }
+}
+
+@keyframes bgRevolve {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes starFlashing {
+  from {
+    transform: scale(1);
+  }
+
+  to {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes turntableRevolve {
+  from {
+    transform: translateX(-50%) rotate(0deg);
+  }
+  to {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes white-to-yellow {
+  0% {
+    background: transparent;
+  }
+  100% {
+    background: #fefc87;
+  }
+}
+
+@keyframes lottie {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 700px;
+  }
+}
+
+.popup-content {
+  background-color: #fff;
+  width: 70%;
+  padding: 20px;
+  border-radius: 8px;
+}

src/pages/aoshi/index/index.vue

@@ -0,0 +1,502 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import Taro from "@tarojs/taro";
+import Lottie from "lottie-web";
+import HPopup from "../../../components/Popup.vue";
+import * as dayjs from "dayjs";
+import dan from "../../../static/dan.png";
+import he from "../../../static/he.png";
+import shuang from "../../../static/shuang.png";
+import kd from "../../../static/kd.png";
+import kh from "../../../static/kh.png";
+import ks from "../../../static/ks.png";
+import wu from "../../../static/wu.png";
+import wzj from "../../../static/wzj.json";
+import zj from "../../../static/zj.json";
+import "./index.scss";
+
+Taro.useDidShow(() => {
+  startMusic(
+    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3",
+    true
+  );
+  getUserInfo();
+  getBetList();
+  getList();
+});
+
+const innerAudioContext = Taro.createInnerAudioContext();
+
+const startMusic = (path, loop = false) => {
+  // const innerAudioContext = Taro.createInnerAudioContext()
+  innerAudioContext.autoplay = true;
+  innerAudioContext.src = path;
+  innerAudioContext.loop = loop;
+  innerAudioContext.onPlay(() => {
+    console.log("开始播放");
+  });
+  innerAudioContext.onError(() => {
+    console.log("播放失败");
+  });
+};
+
+const user_info = ref({
+  nickName: "游客",
+  avatarUrl: "",
+  pulse: 0,
+  integral: 0,
+});
+
+const bet_options = ref([]);
+
+const newKjNum = ref(1);
+
+const list = ref([]);
+
+const kjData = ref({});
+
+const bet_index = ref(null);
+
+const timeStr = ref("");
+
+const getUserInfo = async () => {
+  Taro.request({
+    url: `${
+      process.env.TARO_APP_AOSHI_API
+    }/australia/user/info?uid=${Taro.getStorageSync("uid")}`,
+    method: "GET",
+    success: ({ data: res }) => {
+      user_info.value = res.data.data || {};
+    },
+  });
+};
+
+const getList = () => {
+  Taro.request({
+    url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
+    method: "GET",
+    success: ({ data: res }) => {
+      list.value = res.data.data.data || [];
+      newKjNum.value = list.value[0]?.preDrawIssue + 1;
+    },
+  });
+};
+
+const handelBetClick = (index) => {
+  bet_index.value = index;
+};
+
+// 转盘相关
+const light = ref({
+  container: null,
+  num: 8,
+  itemNum: 3,
+});
+
+const turntable_light = ref();
+const turntable = ref();
+const isRunning = ref(false);
+
+const turntable_list = ref([
+  {
+    id: 3,
+    url: he,
+    name: "和",
+    isActive: false,
+    activeUrl: kh,
+  },
+  {
+    id: 1,
+    url: dan,
+    name: "单",
+    isActive: false,
+    activeUrl: kd,
+  },
+  {
+    id: 2,
+    name: "双",
+    url: shuang,
+    isActive: false,
+    activeUrl: ks,
+  },
+]);
+
+const getBetList = () => {
+  Taro.request({
+    url: `${process.env.TARO_APP_AOSHI_API}/australia/list`,
+    method: "GET",
+    success: ({ data: res }) => {
+      bet_options.value = res.data.data || [];
+      kjData.value = res.data;
+
+      timeId.value = setInterval(() => {
+        countdownFn();
+      }, 1000);
+    },
+  });
+};
+
+const bgUrl = ref(wu);
+
+const handelDzClick = (item) => {
+  turntable_list.value.forEach((itm) => {
+    itm.isActive = false;
+  });
+  item.isActive = true;
+  bgUrl.value = item.activeUrl;
+};
+
+const init = () => {
+  // 初始化轮盘灯
+  let lightFragment = document.createDocumentFragment();
+  for (let i = 0; i < light.value.num; i++) {
+    let lightItem = document.createElement("view");
+    let deg = (360 / light.value.num) * i;
+    lightItem.className = "lightItem";
+    lightItem.style.transform = `rotate(${deg}deg)`;
+    lightFragment.appendChild(lightItem);
+  }
+  turntable_light.value.appendChild(lightFragment);
+};
+
+onMounted(() => {
+  turntable_light.value = document.querySelector("#turntable_light");
+  turntable.value = document.querySelector("#turntable");
+  init();
+
+  // startRun('单')
+});
+
+const timeId = ref();
+
+const time_i = ref();
+
+const countdownFn = () => {
+  const currentTimestamp = dayjs().valueOf();
+  const timeLeft =
+    dayjs(kjData.value.drawTime).unix() * 1000 - currentTimestamp;
+  timeStr.value = dayjs(timeLeft).format("mm分ss秒");
+
+  const m = Number(dayjs(timeLeft).format("mm"));
+  const s = Number(dayjs(timeLeft).format("ss"));
+
+  if (m === 0 && s === 0) {
+    clearInterval(timeId.value);
+    clearInterval(time_i.value);
+    getList();
+    setTimeout(() => {
+      startRun(list.value[0].name);
+    }, 1500);
+  }
+};
+
+const startRun = (name) => {
+  if (!name)
+    return Taro.showToast({
+      title: "未知开奖结果",
+      mask: true,
+      icon: "none",
+      duration: 1000,
+    });
+  isRunning.value = true;
+
+  innerAudioContext.stop();
+
+  startMusic(
+    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/1.mp3",
+    false
+  );
+
+  turntable_list.value.forEach((item) => {
+    item.isActive = false;
+  });
+
+  bet_index.value = null;
+
+  let kj_num = 0;
+
+  switch (name) {
+    case "单":
+      kj_num = 1;
+      break;
+    case "双":
+      kj_num = 2;
+      break;
+    case "和":
+      kj_num = 3;
+      break;
+  }
+
+  let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length);
+
+  let rotate = rotateItemDeg + 5 * 360 - 70;
+
+  const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2));
+
+  turntable.value.removeAttribute("style");
+  setTimeout(() => {
+    turntable.value.style.background = `url(${bgUrl.value}) no-repeat`;
+    turntable.value.style.backgroundSize = "contain";
+    turntable.value.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`;
+    turntable.value.style.transition = `transform ${rotateSpeed}s ease-out`;
+  }, 10);
+
+  setTimeout(() => {
+    isRunning.value = false;
+    getBetJl();
+    setTimeout(() => {
+      bgUrl.value = wu;
+      getUserInfo();
+      startMusic(
+        "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3",
+        true
+      );
+    }, 2000);
+  }, rotateSpeed * 1000);
+};
+
+const betFn = () => {
+  if (bet_index.value === null)
+    return Taro.showToast({
+      title: "请选择豆子",
+      icon: "none",
+    });
+  const arr = turntable_list.value.filter((item) => item.isActive === true);
+
+  const betObj = bet_options.value[bet_index.value];
+
+  if (arr.length === 0)
+    return Taro.showToast({
+      title: "请选择投注项",
+      icon: "none",
+    });
+  Taro.request({
+    url: `${process.env.TARO_APP_AOSHI_API}/australia/user/dice`,
+    method: "POST",
+    data: {
+      name: arr[0].name,
+      uid: Taro.getStorageSync("uid"),
+      aid: String(betObj.ID),
+      game_id: String(Taro.getStorageSync("id")),
+    },
+    success: ({ data: res }) => {
+      Taro.showToast({
+        title: res.msg,
+        icon: "none",
+      });
+    },
+  });
+  setTimeout(() => {
+    getUserInfo();
+  }, 500);
+};
+
+// 前往开奖和投注记录
+const toPage = (type) => {
+  Taro.navigateTo({
+    url: `/pages/aoshi/records/index?type=${type}`,
+  });
+};
+
+// 动画相关
+const isLottie = ref(false); // 是否显示动画
+
+const lottieFn = (type, num = 0) => {
+  isLottie.value = true;
+
+  const lottieEle = document.getElementById("lottie");
+
+  const ctx = Lottie.loadAnimation({
+    container: lottieEle,
+    renderer: "svg",
+    loop: false,
+    autoplay: true,
+    animationData: type === 1 ? zj : wzj,
+  });
+
+  if (type === 1) {
+    const text = document.createElement("view");
+    text.className = "lottie-text";
+    // text.innerHTML = `单`
+    const view = document.createElement("view");
+    view.className = "lottie-bg";
+    view.innerHTML = `<view class="lottie-num">${num}积分</view>`;
+    const els = [view, text];
+
+    for (const i in els) {
+      lottieEle.appendChild(els[i]);
+    }
+  }
+
+  ctx.addEventListener("complete", () => {
+    isLottie.value = false;
+    ctx.destroy();
+  });
+};
+
+const getBetJl = () => {
+  Taro.request({
+    url: `${
+      process.env.TARO_APP_AOSHI_API
+    }/australia/user/record?uid=${Taro.getStorageSync("uid")}`,
+    method: "GET",
+    success: ({ data: res }) => {
+      const data = res.data.data[0];
+      const t = dayjs().format("YYYY-MM-DD");
+
+      // 是否为今天
+      if (data.DrawTime === t) {
+        // console.log('1')
+        // 是否下注
+        if (newKjNum.value - data.Periods === 0) {
+          // console.log('2')
+          // 是否中奖
+          if (data.DrawNum > 0) {
+            lottieFn(1, data.DrawNum);
+            // console.log('3')
+          } else {
+            lottieFn(2);
+            // console.log('4')
+          }
+        }
+      }
+    },
+  });
+  getBetList();
+  getList();
+};
+
+Taro.useDidHide(() => {
+  clearInterval(timeId.value);
+  clearInterval(time_i.value);
+  innerAudioContext.stop();
+});
+
+onBeforeUnmount(() => {
+  clearInterval(timeId.value);
+  clearInterval(time_i.value);
+  innerAudioContext.stop();
+});
+
+const showPopup = ref(false);
+const game_info = ref({});
+
+Taro.useDidShow(() => {
+  // game_info.value = Taro.getStorageSync('gameItem')
+});
+</script>
+
+<template>
+  <view class="page">
+    <view class="header">
+      <view class="left-box">
+        <text class="text">公告: 开奖结果同步澳拾</text>
+      </view>
+      <view class="right-box">
+        <view class="btn tz-btn" @click="toPage(2)"></view>
+        <view class="btn kj-btn" @click="toPage(1)"></view>
+      </view>
+    </view>
+    <view class="user-box">
+      <view class="avatar-box">
+        <view class="bg"></view>
+        <image
+          class="avatar"
+          :src="user_info.avatarUrl || '../../../static/default_avatar.png'"
+        />
+      </view>
+      <view class="user-info">
+        <view class="name">{{ user_info.nickName }}</view>
+        <view class="jf">积分: {{ user_info.integral || 0 }}</view>
+      </view>
+      <view class="dz-box">
+        <view class="dz-bg"></view>
+        <view class="text">{{ user_info.pulse || 0 }}</view>
+      </view>
+      <view class="rule-btn" @click="showPopup = true"></view>
+    </view>
+    <view class="kj-box">
+      <text class="title">第{{ list[0]?.preDrawIssue || 0 }}期已开奖</text>
+      <view class="num-box">
+        <view
+          class="item"
+          v-for="(item, index) in list[0]?.preDrawCode?.split(',')"
+          :key="index"
+        >
+          {{ Number(item) }}
+        </view>
+      </view>
+      <!-- <view class="num-box" style="justify-content: center">
+                <view class="item">
+                    {{ list[0]?.Name }}
+                </view>
+            </view> -->
+    </view>
+    <view
+      style="
+        display: flex;
+        justify-content: flex-end;
+        flex-direction: column;
+        margin-top: 6%;
+      "
+    >
+      <view class="turntable-box">
+        <view class="star star-1"></view>
+        <view class="star star-2"></view>
+        <view class="star star-3"></view>
+        <view class="star star-4"></view>
+
+        <view class="turntable-wrap" id="turntable-wrap">
+          <view class="light" id="turntable_light"></view>
+          <view
+            :style="{
+              background: `url(${bgUrl}) no-repeat`,
+              backgroundSize: 'contain',
+            }"
+            class="turntable"
+            id="turntable"
+          >
+            <view class="prize" v-if="turntable_list && turntable_list.length">
+              <view
+                class="item"
+                v-for="(item, index) in turntable_list"
+                :key="index"
+                @click="handelDzClick(item)"
+              >
+                <image class="img" :src="item.url" />
+                <!-- <view v-if="item.url" :class="item.isActive ? 'icon' : ''"></view> -->
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="bet-btn" @click="betFn"></view>
+        <view class="pointer"></view>
+      </view>
+    </view>
+    <view class="countdown-box">
+      <text class="title" v-if="!isRunning"
+        >第{{ newKjNum }}期开奖还剩:{{ timeStr || "00" }}</text
+      >
+      <text v-else class="title">正在开奖中...</text>
+    </view>
+    <view class="footer-box">
+      <view
+        class="item"
+        v-for="(item, index) in bet_options"
+        :key="index"
+        :class="bet_index === index ? 'item-active' : 'item-no-active'"
+        @click="handelBetClick(index)"
+      >
+        <view class="icon"></view>
+        <view class="name">{{ item.max }}</view>
+      </view>
+    </view>
+    <view id="lottie" v-show="isLottie"></view>
+    <!-- 弹窗 -->
+    <!-- <HPopup :show="showPopup" @isShow="showPopup = false">
+      <view class="popup-content">
+        <rich-text :nodes="game_info.introduction"></rich-text>
+      </view>
+    </HPopup> -->
+  </view>
+</template>

src/pages/aoshi/records/index.config.js

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarBackgroundColor: "#23684B",
+  enablePullDownRefresh: true,
+});

src/pages/aoshi/records/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <view class="app">
+    <template v-if="typeNum === 1">
+      <view class="card" v-for="(item, index) in list" :key="index">
+        <view>
+          <view>
+            第{{ item.preDrawIssue }}期开奖:
+            <text
+              :style="{
+                color: numColor(item.name),
+              }"
+            >
+              {{ item.name }}
+            </text>
+            <view>
+              {{ item.preDrawCode }}
+            </view>
+          </view>
+          <view>开奖时间: {{ item.preDrawTime }}</view>
+        </view>
+      </view>
+    </template>
+    <template v-else>
+      <view v-if="list.length > 0">
+        <view class="card desc" v-for="(item, index) in list" :key="index">
+          <view>
+            <view>第{{ item.Periods }}期投注:</view>
+            <view>
+              点数:
+              <text style="color: red">{{ item.Name }}</text>
+            </view>
+            <view class="sub">
+              投注时间:
+              <text>{{ item.DrawTime }}</text>
+            </view>
+          </view>
+          <view style="text-align: right">
+            <view style="color: red" v-if="item.State === 1">
+              +{{ item.DrawNum }}积分
+            </view>
+            <view style="color: green">-{{ item.Number }}豆子</view>
+          </view>
+        </view>
+      </view>
+      <view v-else>
+        <view style="margin-top: 100px">暂无记录.....</view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+
+const list = ref([]);
+
+const typeNum = ref(0);
+
+Taro.useLoad((options) => {
+  typeNum.value = Number(options.type);
+  Taro.setNavigationBarTitle({
+    title: options.type === "1" ? "开奖记录" : "投注记录",
+  });
+  getData();
+});
+
+Taro.usePullDownRefresh(() => {
+  getData();
+});
+
+const numColor = (num) => {
+  switch (num) {
+    case "单":
+      return "orange";
+    case "双":
+      return "blue";
+    case "和":
+      return "purple";
+    default:
+      return "black";
+  }
+};
+
+const getData = async () => {
+  if (typeNum.value === 1) {
+    Taro.request({
+      url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
+      method: "GET",
+      success: ({ data: res }) => {
+        list.value = res.data.data.data || [];
+      },
+    });
+  } else {
+    Taro.request({
+      url: `${
+        process.env.TARO_APP_AOSHI_API
+      }/australia/user/record?uid=${Taro.getStorageSync("uid")}`,
+      method: "GET",
+      success: ({ data: res }) => {
+        list.value = res.data.data || [];
+      },
+    });
+  }
+  Taro.stopPullDownRefresh();
+};
+</script>
+
+<style lang="scss">
+.taro_page {
+  background-color: #f5f5f5 !important;
+}
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  //justify-content: center;
+  font-size: 35px;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.card {
+  width: 95%;
+  padding: 20px;
+  background-color: #fff;
+  margin-top: 10px;
+  border-radius: 10px;
+
+  .sub {
+    margin-top: 10px;
+    color: #555555;
+  }
+}
+
+.desc {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+</style>