Initial commit

odcs2.com/src/App.vue

@@ -0,0 +1,334 @@
+<template>
+  <div id="app" class="app">
+    <div class="content">
+      <headerTop id="headerTop"></headerTop>
+      <!-- animate__animated animate__fadeInLeft -->
+      <router-view class="appview" v-if="!$route.meta.iskeep"></router-view>
+      <keep-alive>
+        <router-view class="appview" v-if="$route.meta.iskeep"></router-view>
+      </keep-alive>
+      <!-- <login v-if="show" class="App_login"></login> -->
+      <!-- <WipeSidebar :slider="slider" class="cesildera"></WipeSidebar> -->
+      <!-- <slider v-if="slider" class="App_slider"></slider> -->
+      <illustrate v-if="isillustrate" class></illustrate>
+
+      <bottomUser id="bottomUser"></bottomUser>
+      <!-- 广告 -->
+      <advert :img="advertisementImg" v-if="advertStatus"></advert>
+    </div>
+  </div>
+</template>
+<script></script>
+<script>
+import login from "@/views/Home/common/login.vue";
+import advert from "@/views/Home/common/advert.vue";
+// import slider from "@/components/sliderUser.vue";
+import { getToken } from "@/api/cookie";
+
+import headerTop from "@/components/headerTop.vue";
+import bottomUser from "@/components/bottomUser.vue";
+// import WipeSidebar from "@/components/WipeSidebar.vue";
+import { getAdvertisement } from "@/api/index";
+import store from "@/vuex/store";
+export default {
+  data() {
+    return {
+      he: 0,
+      // width: window.innerWidth
+      show: false,
+      slider: false,
+      isillustrate: false,
+      w: document.documentElement.clientWidth,
+      screenWidth: document.body.clientWidth, // 屏幕宽度
+      // 广告图片
+      advertisementImg: "",
+      // 广告状态
+      advertStatus: false,
+      
+    };
+  },
+  components: {
+    login,
+    headerTop,
+    // slider,
+    bottomUser,
+    // WipeSidebar,
+    advert,
+  },
+  mounted() {
+    const that = this;
+
+    that.getAdvertisementImg();
+    window.onresize = () => {
+      return (() => {
+        window.screenWidth = document.body.clientWidth;
+        that.screenWidth = window.screenWidth;
+      })();
+    };
+    this.$nextTick(() => {
+      console.log("播放音乐");
+      this.$store.commit("playAudio");
+    });
+    console.log("window.history.state", window.history.state);
+    if (window.history.state && window.history.state.title) {
+      if (this.$store.state.LOGIN_IS_SHOW) {
+        return;
+      } else {
+        window.history.back();
+      }
+    }
+    let aa = document.getElementById("headerTop").offsetHeight;
+    let bb = document.getElementById("bottomUser").offsetHeight;
+    this.he = aa + bb;
+
+    this.getToken();
+
+    this.$bus.$on("close", (data) => {
+      this.show = data;
+      // console.log("关闭登录");
+      if (!data) {
+        // 检查是否有足够的历史记录，避免退出网站
+        if (window.history.length > 2) {
+          this.$router.back();
+        } else {
+          // 如果没有足够的历史记录，跳转到首页
+          this.$router.push('/');
+        }
+      }
+    });
+    this.$bus.$on("is_illustrate", (data) => {
+      this.isillustrate = data;
+    });
+    this.$bus.$on("sliderbtn", (data) => {
+      this.slider = data;
+    });
+    // 关闭广告
+    this.$bus.$on("closeAdvert", (data) => {
+      this.advertStatus = data;
+      this.$store.commit("ADVERT_IS_SHOW", false);
+      console.log('ADVERT_IS_SHOW',this.$store.state.ADVERT_IS_SHOW)
+    });
+    // 关闭广告，打开注册
+    this.$bus.$on("goLogin", (data) => {
+      this.advertStatus = false;
+      this.goLogin(data);
+    });
+    // 退出登录之后打开广告
+    this.$bus.$on("openAdvert", (data) => {
+      this.advertStatus = true;
+      this.$store.commit("ADVERT_IS_SHOW", true);
+    });
+  },
+  methods: {
+    getAdvertisementImg() {
+      getAdvertisement().then((res) => {
+        console.log("广告图片", res.data);
+        if(res.data.code == 200){
+          this.advertisementImg = res.data.data.picture;
+        }else{
+          console.error(res.data.msg);
+        }
+      });
+    },
+    getToken() {
+      if (getToken()) {
+        this.show = false;
+        this.$store.commit("LOGIN_IS_SHOW", false);
+        this.$store.commit("ADVERT_IS_SHOW", false);
+        this.$bus.$emit("islogin", this.show);
+      } else {
+        this.$router.push("/login");
+        this.show = false;
+      }
+    },
+    goLogin(type) {
+      setTimeout(() => {
+        this.$router.push({ name: "login", params: { type: type } });
+        this.show = true;
+        this.$bus.$emit("islogin", this.show);
+        this.$store.commit("LOGIN_IS_SHOW", true);
+      }, 500);
+    },
+    // 获取广告图片
+    getAdvert() {
+      // this.$api.getAdvert().then((res) => {
+      //   if (res.code == 200) {
+      //     this.$store.commit("ADVERT", res.data);
+      //   }
+      // });
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="scss">
+#bottomUser {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  height: 92px;
+  font-family: Alimama ShuHeiTi, serif;
+  background: url("./assets/bottom-bg.png") no-repeat 50% / 100% 100%;
+  z-index: 99;
+  @media (max-width: 550px) {
+    position: fixed !important;
+    bottom: 0 !important;
+  }
+}
+
+.App_slider {
+  position: absolute;
+  right: 15px;
+  top: 30%;
+  animation: slider 0.3s linear;
+}
+@keyframes slider {
+  0% {
+    right: -72px;
+  }
+  75% {
+    right: 18px;
+  }
+  100% {
+    right: 15px;
+  }
+}
+.App_login {
+  animation: mymove 0.3s linear;
+}
+@keyframes mymove {
+  0% {
+    top: -10px;
+    opacity: 0.7;
+  }
+  100% {
+    top: 0;
+    opacity: 1;
+  }
+}
+.cesildera {
+  position: absolute;
+  right: 30px;
+  bottom: 200px;
+}
+.appview {
+  overflow-y: scroll;
+  position: relative;
+  height: calc(100vh - 8rem);
+  padding-bottom: 4rem !important;
+  // padding-bottom: 200px;
+}
+@media (max-width: 550px) {
+  .appview {
+
+  // height: 80vh;
+}
+}
+.appview::-webkit-scrollbar {
+  display: none;
+}
+.appview::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+  opacity: 0.2;
+}
+.appview::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 5px;
+}
+.appview::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+.content {
+  text-align: center;
+  margin: 0 auto;
+  color: #fff;
+  height: 100vh;
+  width: 100vw;
+  position: relative;
+  font-size: 1rem;
+  max-width: 430px;
+}
+.content::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url("./assets/home.png") no-repeat center center;
+  background-size: cover;
+  opacity: 0.9; /* 设置背景图片的透明度 */
+  z-index: 0; /* 确保背景图片在文字后面 */
+}
+.homeBg::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url("./assets/home.png") no-repeat top center;
+  background-size: cover;
+  // opacity: 0.8; /* 设置背景图片的透明度 */
+}
+.content::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.53); /* 黑色蒙版，透明度为 0.6 */
+    z-index: -1; /* 确保蒙版在背景图片之上，文字之下 */
+}
+.zuo {
+  background: url("../public/1.jpg") no-repeat right center;
+  background-size: cover;
+}
+.you {
+  background: url("../public/you.jpg") no-repeat left center;
+  background-size: cover;
+}
+#app {
+  // font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Microsoft Yahei";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #fff;
+  height: 100vh;
+  width: 100vw;
+  position: relative;
+  font-size: 1rem;
+  -moz-user-select: -moz-none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: flex;
+  justify-content: center;
+  background:  url('./assets/home.gif') no-repeat center center;
+  background-size: cover;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  text-decoration: none;
+}
+img {
+  vertical-align: middle;
+}
+svg {
+  display: block;
+  margin: auto;
+}
+</style>

odcs2.com/src/api/basurl.js

@@ -0,0 +1,9 @@
+// const DEV_BASE_URL = 'ws://localhost:8082'
+// const DEV_BASE_URL = "ws://123.60.170.219:8082";
+
+
+//const DEV_BASE_URL = "ws://1.92.85.51:8080";
+const DEV_BASE_URL = "ws://127.0.0.1:8081";
+export default {
+  BASE_API: DEV_BASE_URL,
+};

odcs2.com/src/api/cookie.js

@@ -0,0 +1,13 @@
+import Cookies from 'js-cookie'
+const TokenKey = 'token'
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export  function removeToken() {
+  return Cookies.remove(TokenKey)
+}

odcs2.com/src/api/index.js

@@ -0,0 +1,975 @@
+import axios from "axios";
+import { getToken, removeToken } from "./cookie";
+// import { Loading } from 'element-ui';
+import { Message } from "element-ui";
+import store from "@/vuex/store";
+import Vue from "vue";
+let vue = new Vue();
+// import Vue from 'vue'
+// import App from '../App.vue'
+// import router from '@/router'
+// var vm = new Vue({
+//   router,
+//   render: h => h(App)
+// }).$mount('#app')
+
+const reqAxios = axios.create({
+  // baseURL: "http://192.168.1.3:8081",
+  // baseURL: "http://192.168.1.3:8080",
+  // baseURL: "http://123.60.170.219:8082",
+  // baseURL: "http://localhost:8082",
+  //baseURL: "http://192.168.1.39:8082",
+
+
+//baseURL:'http://1.92.85.51:8080',
+// baseURL:'http://3.92.67.237:8080',
+baseURL:'http://127.0.0.1:8081/',
+  
+  //  baseURL: "http://beecsgo.com/prod-api/",
+  //  baseURL: "http://www.f2cs2.com/prod-api/",
+  // baseURL: 'http://127.0.0.1/prod-api',
+  // baseURL: "http://101.200.132.56/prod-api/",
+
+  timeout: 60000, // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
+});
+// 拦截请求（拦截器）
+const timer = new Map();
+reqAxios.interceptors.request.use(
+  function (request) {
+    if (request.url !== "/api/luckyUpgrade/getUpgradeRecord") {
+      vue.$toast("加载中");
+    }
+    // 处理请求公共数据，如添加请求头令牌...
+    let token = getToken();
+    //请求头设置
+    request.headers = {
+      "content-type": "application/json;",
+      userType: "user",
+      Authorization: token,
+    };
+    // // console.log('request',request);
+    if (request.url == "/api/luckyUpgrade/upgrade") {
+      return throttle(request, 3500);
+    }
+    if (
+      request.url == "/api/luckyUpgrade/getUpgradeRecord" ||
+      request.url == "/api/roll/getRollList" ||
+      request.url == "/api/userAmountRecords/blendErcashRank" ||
+      request.url == "/api/boxRecords/historyByCondition" ||
+      request.url == "/api/userAmountRecords/deliveryRecords" ||
+      request.url == "/api/userAmountRecords/userAccountDetail" ||
+      request.url == "/api/userPackSack/getPackSack"||
+      request.url == "/api/roll/getRollPlayers"
+    ) {
+      return request;
+    }
+    return throttle(request, 500);
+    // return request;
+  },
+  function (error) {
+    console.log("requesterror", error);
+    return Promise.reject(error);
+  }
+);
+function throttle(request, time) {
+  // console.log(request);
+  let lastTime = timer.get(request.url);
+  let nowTime = new Date().getTime();
+  if (request.method == "get") {
+    return request;
+  } else {
+    if (lastTime && nowTime - lastTime < time) {
+      console.log("overRequest", request);
+      return Promise.reject("请勿频繁操作");
+      // return false
+    } else {
+      timer.set(request.url, nowTime);
+      return request;
+    }
+  }
+}
+
+//响应拦截器
+reqAxios.interceptors.response.use(
+  (res) => {
+    // console.log('response',res)
+    vue.$hide();
+    if (res.data.code == 401) {
+      Message({
+        message: "登录已过期,请重新登陆",
+        type: "warning",
+        customClass: "log_warning",
+      });
+      removeToken();
+      store.commit("LOGIN_IS_SHOW", true);
+      store.commit("ADVERT_IS_SHOW", true);
+      return;
+    } else if (res.status == 200) {
+      return res;
+    } else if (res.data.code == 200) {
+      return res;
+    } else {
+      Message({
+        message: res.data.msg,
+        type: "warning",
+        customClass: "log_warning",
+      });
+      return res;
+    }
+  },
+  (err) => {
+    console.log("err", err);
+    if (err == "请勿频繁操作") {
+      Message({
+        message: "您的操作太频繁，请1秒后再试",
+        type: "warning",
+        customClass: "log_warning",
+      });
+    }
+    if (err.response.status == 500) {
+      Message({
+        message: err.response.data.message,
+        type: "warning",
+        customClass: "log_warning",
+      });
+    }
+    if (err.response.status == 401) {
+      removeToken();
+      store.commit("LOGIN_IS_SHOW", true);
+      store.commit("ADVERT_IS_SHOW", true);
+      Message({
+        message: "登录过期，请重新登陆",
+        type: "warning",
+        customClass: "log_warning",
+      });
+    }
+  }
+);
+
+//登录
+export const getLogin = (data) => {
+  return reqAxios.post("/api/login", data);
+};
+//退出登录
+export const logOut = () => {
+  return reqAxios.post("/api/logout");
+};
+//注册
+export const getRegister = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/register",
+    data,
+  });
+};
+
+// 实名认证
+export const realNameAuthentication = (data) => {
+  return reqAxios({
+    url: `/api/user/realNameAuthentication`,
+    method: "post",
+    data: data,
+  });
+};
+
+//获取下级人数
+export const getUserSubusser = () => {
+  return reqAxios({
+    url: "/api/user/rechargeCount",
+    method: "get",
+  });
+};
+export const getUserSubRechange = () => {
+  return reqAxios({
+    url: "/api/user/getOrdersAmounts",
+    method: "get",
+  });
+};
+
+// 判断是否充值
+export const IsRecharge = () => {
+  return reqAxios.get("/api/user/getUserIsRecharge");
+};
+
+// 刷新用户金币
+export const updateUserData = () => {
+  return reqAxios.post("/api/user/updateUserData");
+};
+
+// 获取用户信息
+export const getUserInfo = () => {
+  return reqAxios.get("/api/getInfo");
+};
+
+//roll房列表
+export const getRollList = (data) => {
+/*   return reqAxios.get("/api/roll/getRollList",data); */
+  return reqAxios({
+    url: `/api/roll/getRollList`,
+    method: "get",
+    params: data,
+  });
+};
+//获取roll房信息
+export const getRollDetial = (rollId) => {
+  return reqAxios({
+    url: `/api/roll/getRollDetails/${rollId}`,
+    method: "get",
+  });
+};
+
+//加入roll房
+export const joinRoll = (rollId, rollPassword = "") => {
+  return reqAxios({
+    url: `/api/roll/joinRoll`,
+    method: "post",
+    data: {
+      rollId,
+      rollPassword,
+    },
+  });
+};
+
+// 获取用户参与Roll房
+// export const getMyPartRollList = (data) => {
+//   return reqAxios({
+//     url: `/api/roll/getRollList`,
+//     method: "get",
+//     params: data,
+//   });
+// };
+
+// 个人明细
+export const getUserLogList = (data) => {
+  return reqAxios({
+    url: `/api/userAmountRecords/userAccountDetail`,
+    method: "post",
+    data,
+  });
+};
+//可充值钱数
+export const getRechargelist = (data) => {
+  return reqAxios({
+    url: `/api/recharge/list`,
+    method: "get",
+    params: data,
+  });
+};
+//充值记录
+export const orderList = () => {
+  return reqAxios({
+    url: `/admin/order/list`,
+    method: "get",
+  });
+};
+//
+export const jiuJiaPay = (data) => {
+  return reqAxios({
+    url: `/api/jiuJiaPay/createPay`,
+    method: "post",
+    data: data,
+  });
+};
+//
+export const kamiPay = (data) => {
+  return reqAxios({
+    url: `/api/recharge/cardPay`,
+    method: "post",
+    params: data,
+  });
+};
+
+// 签到
+export const attendance = () => {
+  return reqAxios({
+    url: `/api/attendanceRecord/attendance`,
+    method: "get",
+  });
+};
+// 七日签到
+export const attendance7day = () => {
+  return reqAxios({
+    url: `/api/attendanceRecord/sevenAttendance`,
+    method: "get",
+  });
+};
+
+//当日排行榜
+export const creditsRank = (data) => {
+  return reqAxios({
+    url: `api/userCreditsRecords/creditsRank/2/1/5`,
+    method: "get",
+    params: data,
+  });
+};
+// 获取下级流水列表
+export const getUserxList = () => {
+  return reqAxios({
+    url: `/api/user/getLsjlList`,
+    method: "get",
+  });
+};
+
+// 推广
+export const userCreditsRecords = (page, size) => {
+  return reqAxios({
+    url: `api/userAmountRecords/pWelfareRecords/${page}/${size}`,
+    method: "get",
+  });
+};
+
+//站内信-获取站内信列表
+
+export const getMessageList = (data) => {
+  return reqAxios({
+    url: `/api/message/getMessageList`,
+    method: "get",
+    params: data,
+  });
+};
+
+//任务列表
+export const gettaskList = () => {
+  return reqAxios({
+    url: `/api/ttTask/taskOfme`,
+    method: "get",
+  });
+};
+//领取任务
+export const claimTasks = (tid) => {
+  return reqAxios({
+    url: `/api/ttTask/getAward/${tid}`,
+    method: "get",
+  });
+};
+
+// 头像列表
+export const getavatar = () => {
+  return reqAxios({
+    url: "/api/userAvatar/list",
+    method: "get",
+  });
+};
+//站内信-查看内容
+
+export const getMessageView = (data) => {
+  return reqAxios({
+    url: `/api/message/view?id=${data}`,
+    method: "get",
+  });
+};
+//站内信-批量操作
+export const getMessageOperation = (data) => {
+  return reqAxios({
+    url: `/api/message/batchOperation?ids=${data.ids}&status=${data.status}`,
+    method: "post",
+    // data: data,
+  });
+};
+
+//首页顶部轮播
+export const getWeapon = (options) => {
+  return reqAxios({
+    url: `/api/boxRecords/historyByCondition`,
+    method: "POST",
+    data: options,
+  });
+};
+
+//首页中间轮播
+export const getHomeBanner = (options) => {
+  return reqAxios.get("/api/websiteSetup/getBannerList", options);
+};
+//获取广告
+export const getAdvertisement = () => {
+  return reqAxios.get("/api/advertisement/1");
+};
+
+//开箱 根据宝箱ID获取宝箱数据
+
+//开箱 历史掉落
+export const getBoxhistory = (options) => {
+  return reqAxios({
+    url: `/api/boxRecords/historyByCondition`,
+    method: "POST",
+    data: options,
+  });
+};
+
+//开箱接口
+export const openBox = (options) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/bindbox/openBox`,
+    params: options,
+  });
+};
+
+//开箱，武器分解 // 背包分解
+export const decompose = (options) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/userPackSack/decompose`,
+    data: options,
+  });
+};
+// 分解记录
+
+export const userdecompseList = (data) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/userPackSack/decomposeLog`,
+    data,
+  });
+};
+
+// 提取饰品
+export const delivery = (options) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/userPackSack/delivery`,
+    data: options,
+  });
+};
+
+// 转赠饰品
+export const transfer = (options) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/userPackSack/transfer`,
+    data: options,
+  });
+};
+
+//全部对战，查询所有对战列表
+export const getFightList = () => {
+  return reqAxios({
+    url: "/api/fight/getFightList",
+    method: "get",
+    data: {
+      page: 1,
+      size: 10,
+      statusList: [1, 0],
+    },
+  });
+};
+
+//创建对战
+export const createFight = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/fight/createFight",
+    data,
+  });
+};
+//玩家准备
+/* /api/fight/seatrReady */
+export const ApiSeatReady = (fightId) => {
+  return reqAxios({
+    url: `/api/fight/seatrReady?fightId=${fightId}`,
+    method: "get",
+  });
+};
+//房主开始游戏
+export const Playthegame = (fightId) => {
+  return reqAxios({
+    url: `/api/fight/fightBegin?fightId=${fightId}`,
+    method: "get",
+  });
+};
+//游戏结束
+/* /api/fight/fightEnd */
+export const Gameover = (fightId) => {
+  return reqAxios({
+    method: "get",
+    url: `/api/fight/fightEnd?fightId=${fightId}`,
+  });
+};
+
+//保存对战回合
+export const saveFightBoutData = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/fight/saveFightBoutData",
+    data: data,
+  });
+};
+//获取对战回合
+export const getFightBoutNum = (fightId) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/fight/getFightBoutNum/${fightId}`,
+  });
+};
+//获取对战数据
+export const getFightData = (fightId) => {
+  return reqAxios({
+    url: `/api/fight/getFightData/${fightId}`,
+    method: "get",
+  });
+};
+//获取对战结果
+export const getFightResult = (fightId) => {
+  return reqAxios({
+    url: `/api/fight/getFightResult/${fightId}`,
+    method: "get",
+  });
+};
+//查询对战宝箱列表
+export const getFightBoxList = (data) => {
+  return reqAxios({
+    url: `/api/fight/getFightBoxList`,
+    method: "get",
+    params: data,
+  });
+};
+//加入对战的验证
+export const joinFightverify = (fightId) => {
+  return reqAxios({
+    url: `/api/fight/joinFightRoom`,
+    method: "post",
+    params: fightId,
+  });
+};
+
+//加入对战
+export const joinFight = (data) => {
+  return reqAxios({
+    url: `/api/fight/joinFight`,
+    method: "post",
+    params: data,
+  });
+};
+//对战宝箱饰品
+export const boxOrnament = (id) => {
+  return reqAxios.get(
+    `/api/fightAgainstBData/getFightAgainstBoxOrnamentsById?bid=${id}`
+  );
+};
+
+//我的对战
+export const getMyPartFightList = (data) => {
+  return reqAxios({
+    url: `/api/fight/getMyPartFightList`,
+    method: "get",
+    params: data,
+  });
+};
+
+//获取每一回合的对战结果
+export const getpkrealdetial = (data) => {
+  return reqAxios({
+    url: "/api/fight/getFightRecord",
+    method: "get",
+    params: data,
+  });
+};
+
+//追梦 获取饰品列表
+
+export const deramlist = (data) => {
+  return reqAxios({
+    method: "get",
+    url: `/api/luckyUpgrade/getOrnamentsList`,
+    params: data,
+  });
+};
+
+//追梦
+export const deramrecord = (data) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/luckyUpgrade/getUpgradeRecord`,
+    data,
+  });
+};
+
+//追梦
+export const deramupgrade = (data) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/luckyUpgrade/upgrade`,
+    data: data,
+  });
+};
+
+//用户签到post
+export const getUserSign = (data) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/user/userSigin`,
+    data,
+  });
+};
+
+//用户签到查询
+export const getUserSigndata = (data) => {
+  return reqAxios.get(`/api/user/userSigninData?signDate=${data}`);
+};
+
+//发送验证码 1注册 2登录 3修改手机号 4忘记密码
+export const getcode = (data) => {
+  return reqAxios.post(`/api/sms/getVerifyCode`, data);
+  // return reqAxios.post(`/sms/getVerifyCode?phonenumber=${data.phonenumber}&type=${data.type}`)
+};
+
+//修改密码
+export const changePass = (data) => {
+  return reqAxios.post("/api/user/forgetPassword", data);
+};
+
+//充值查询
+export const getUserchong = () => {
+  return reqAxios.get(`/api/ttCoinItem/getCoinItemList`);
+};
+
+export const Recgargezfb = (data) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/jiujiaOrder/createOrder`,
+    data,
+  });
+};
+export const Recgargewx = (data) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/tianxinOrder/createOrder`,
+    data,
+  });
+};
+
+//商城列表
+export const shoplist = (options) => {
+  return reqAxios({
+    method: "get",
+    url: `/api/shopping/list`,
+    params: options,
+  });
+};
+//商城查询条件
+export const shopcondition = (value) => {
+  return reqAxios({
+    url: `/api/shopping/getShoppingQuery?value=` + value,
+    method: "get",
+  });
+};
+
+// 商城物品兑换
+export const shopconvert = (options) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/shopping/exchange`,
+    params: options,
+  });
+};
+// 背包
+export const getPackSack = (data) => {
+  return reqAxios({
+    url: `/api/userPackSack/getPackSack`,
+    method: "post",
+    data,
+  });
+};
+
+// 汰换
+export const updateReplacement = (data) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/skinsservice/replacementRecord/synthesizeItems`,
+    data,
+  });
+};
+// 收支明细
+export const getdetail = (pageSize = 15, pageNum = 1) => {
+  return reqAxios.get(
+    `/api/user/getBeanChangeRecords?pageSize=${pageSize}&pageNum=${pageNum}`
+  );
+};
+
+// 绑定交易链接
+export const giveMoneyAPI = (options) => {
+  return reqAxios.post(`/api/user/bindSteamLink?steamLink=${options}`);
+};
+// 更新用户信息
+export const updateUserDetails = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/user/updateUserDetails",
+    data,
+  });
+};
+// 更新用户头像信息
+export const updataavatar = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/user/profilePictureUpload",
+    data: data,
+  });
+};
+// 绑定推广链接
+export const giveUserAPI = (options) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/user/bindInvitationCode?invitationCode=${options}`,
+  });
+};
+
+// 提货账单
+export const getExtractBillAPI = (data) => {
+  return reqAxios.get(
+    `/api/user/getDeliveryRecordList?status=${data}&pageSize=1000&pageNum=1`
+  );
+};
+
+//文章
+export const getArticle = (type) => {
+  return reqAxios.get(`/api/websiteSetup/getContentByType/?alias=${type} `);
+};
+//查询宝箱分类
+export const boxesType = () => {
+  return reqAxios.get("/api/bindbox/getBoxList");
+};
+
+///api/battleRoyale/joinRoom
+export const getbigkillroom = (rankId, roomid, copies) => {
+  return reqAxios.get(
+    `/api/battleRoyale/joinRoom?rankId=${rankId}&roomId=${roomid}&copies=${copies}`
+  );
+};
+export const getbigkilHistroy = (rankId) => {
+  return reqAxios.get(`/api/battleRoyale/getHistoricalRecord?rankId=${rankId}`);
+};
+
+//卡密 /prod-api/api/ttCoinItem/checkKM/{key}
+export const getkami = (id) => {
+  return reqAxios.post(`/api/ttCoinItem/checkKM/${id}`);
+};
+
+// 查询用户金币 /api/user/getUserRealTimeBean
+
+export const getuserbean = () => {
+  return reqAxios.get(`/api/user/getUserRealTimeBean`);
+};
+
+// type 1 昨天 2 今天
+
+export const getdiaoluo = () => {
+  return reqAxios.get(`/api/user/propRankOfDay/${1}/1`);
+};
+
+// /api/user/propRankOfDay
+
+////api/websocket/skins
+//协议
+
+export const getagreement = (id) => {
+  return reqAxios.get(`/admin/content/${id}`);
+};
+//宝箱详情
+export const simpleBoxDetail = (boxId) => {
+  // return reqAxios.get(`/api/fight/simpleBoxDetail/boxId=${boxId}`);
+  return reqAxios({
+    method: "get",
+    url: "/api/fight/simpleBoxDetail",
+    params: { boxId },
+    // data:{boxId}
+  });
+};
+//观战获取房间数据
+export const audience = (id) => {
+  return reqAxios.get(`/api/fight/audience?fightId=${id}`);
+};
+//极速竞技退出房间/api/fight/fightRoomExit
+export const fightRoomExit = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/fight/fightRoomExit",
+    params: data,
+  });
+};
+//我参与的
+export const fightOnMyOwn = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/fight/fightOnMyOwn",
+    data,
+  });
+};
+//支付接口
+export const ApiAddTrans = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/zyZFB/ApiAddTrans",
+    params: data,
+  });
+};
+//国富汇通
+export const ApiAdddgfht = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/gfht/pay",
+    data,
+  });
+};
+
+//排行榜
+export const blendErcashRank = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/userAmountRecords/blendErcashRank",
+    data,
+  });
+};
+//获取团队信息
+export const teamUsers = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/userAmountRecords/teamUsers",
+    data,
+  });
+};
+export const changePW = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/user/changePW",
+    data,
+  });
+};
+//获取个人提货记录
+export const deliveryRecords = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/userAmountRecords/deliveryRecords",
+    data,
+  });
+};
+//获取个人充值明细
+export const rechargeRecords = (data) => {
+  return reqAxios({
+    method: "get",
+    url: "/api/order/list",
+    params: data,
+  });
+};
+//历史详情
+export const fightDetail = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/fight/fightDetail",
+    data,
+  });
+};
+//roll房参与人员
+export const getRollPlayers = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/roll/getRollPlayers",
+    data,
+  });
+};
+//roll房开奖详情
+export const getRollOpenPrize = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/roll/getRollOpenPrize",
+    data,
+  });
+};
+//roll房奖池
+export const getRollPrizePool = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/roll/getRollPrizePool",
+    data,
+  });
+};
+export const earlierHistory = (data) => {
+  return reqAxios({
+    method: "post",
+    url: "/api/fight/earlierHistory",
+    data,
+  });
+};
+export const endRoll = (data) => {
+  return reqAxios({
+    method: "get",
+    url: `/api/roll/endRoll/${data}`,
+  });
+};
+export const packSackGlobalData = () => {
+  return reqAxios({
+    method: "get",
+    url: `/api/userPackSack/packSackGlobalData`,
+  });
+};
+
+export const bindBoss = (data) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/user/bindBoss`,
+    data,
+  });
+};
+export const receiveRedPacket = (data) => {
+  return reqAxios({
+    method: "get",
+    url: `/api/bonus/receiveRedPacket/${data}`,
+  });
+};
+export const mayi = (data) => {
+  return reqAxios({
+    method: "post",
+    url: `/api/mayi/ApiAddTrans`,
+    data,
+  });
+};
+export const getBoxList = (data) => {
+  return reqAxios({
+    method: "get",
+    url: `/api/bindbox/getBoxList`,
+    params:data,
+  });
+};
+export const getBoxTypeList = (data) => {
+  return reqAxios({
+    method: "get",
+    url: `/api/box/getBoxTypeList/${data.page}/${data.size}`,
+  });
+};
+/* /api/bindbox/{boxId} */
+export const getDetail = (boxId) => {
+  return reqAxios({
+    method: "get",
+    url: `/api/bindbox/${boxId}`,
+  });
+};
+//vip等级
+export const welfareList = () => { 
+  return reqAxios({
+    method: "get",
+    url: `/api/welfare/getWelfareList`,
+  });
+}
+///api/userAmountRecords/rechargeRanking 获取充值排行榜
+export const rechargeRanking = () => { 
+  return reqAxios({
+    method: "get",
+    url: `/api/userAmountRecords/rechargeRanking `,
+  });
+}
+///api/userAmountRecords/rechargeRankingRewardsIntroduction
+export const rechargeRankingRewardsIntroduction = () => { 
+  return reqAxios({
+    method: "get",
+    url: `/api/userAmountRecords/rechargeRankingRewardsIntroduction`,
+  });
+}
+
+
+// /api/user/vipLevelIntroduction
+export const getviplist = () => { 
+  return reqAxios({
+    method: "get",
+    url: `/api/user/vipLevelIntroduction`,
+  });
+}

odcs2.com/src/api/scoket.js

@@ -0,0 +1,37 @@
+// websocket.js
+
+const WebSocketPlugin = {
+  install(Vue, options) {
+ 
+
+    const socket = new WebSocket(options.url);
+ 
+    Vue.prototype.$socket = socket;
+ 
+    socket.addEventListener('open', () => {
+      console.log('WebSocket连接成功');
+    });
+ 
+    socket.addEventListener('message', (event) => {
+      console.log('Received message:', event.data);
+      Vue.prototype.$emit('websocket-message', event.data);
+    });
+ 
+    socket.addEventListener('close', (event) => {
+      console.log('WebSocket连接关闭', event);
+      Vue.prototype.$emit('websocket-close', event);
+    });
+ 
+    socket.addEventListener('error', (error) => {
+      console.error('WebSocket连接错误', error);
+      Vue.prototype.$emit('websocket-error', error);
+    });
+    socket.close();
+    this.$sockets.onclose = () => {
+      console.log('WebSocket 连接已关闭');
+    };
+    
+  },
+};
+ 
+export default WebSocketPlugin;

odcs2.com/src/assets/font/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

odcs2.com/src/assets/font/demo_index.html

@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+        <span class="sub-title">彩色字体</span>
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4325432" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe656;</span>
+                <div class="name">小丑</div>
+                <div class="code-name">&amp;#xe656;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">皇冠</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe676;</span>
+                <div class="name">皇冠</div>
+                <div class="code-name">&amp;#xe676;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe626;</span>
+                <div class="name">背景音乐-调皮</div>
+                <div class="code-name">&amp;#xe626;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe654;</span>
+                <div class="name">皇冠</div>
+                <div class="code-name">&amp;#xe654;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: 
+       url('iconfont.woff2?t=1699606514058') format('woff2'),
+       url('iconfont.woff?t=1699606514058') format('woff'),
+       url('iconfont.ttf?t=1699606514058') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiaochou"></span>
+            <div class="name">
+              小丑
+            </div>
+            <div class="code-name">.icon-xiaochou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huangguan"></span>
+            <div class="name">
+              皇冠
+            </div>
+            <div class="code-name">.icon-huangguan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huangguan1"></span>
+            <div class="name">
+              皇冠
+            </div>
+            <div class="code-name">.icon-huangguan1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-beijingyinle-tiaopi"></span>
+            <div class="name">
+              背景音乐-调皮
+            </div>
+            <div class="code-name">.icon-beijingyinle-tiaopi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huangguan2"></span>
+            <div class="name">
+              皇冠
+            </div>
+            <div class="code-name">.icon-huangguan2
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiaochou"></use>
+                </svg>
+                <div class="name">小丑</div>
+                <div class="code-name">#icon-xiaochou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huangguan"></use>
+                </svg>
+                <div class="name">皇冠</div>
+                <div class="code-name">#icon-huangguan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huangguan1"></use>
+                </svg>
+                <div class="name">皇冠</div>
+                <div class="code-name">#icon-huangguan1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-beijingyinle-tiaopi"></use>
+                </svg>
+                <div class="name">背景音乐-调皮</div>
+                <div class="code-name">#icon-beijingyinle-tiaopi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huangguan2"></use>
+                </svg>
+                <div class="name">皇冠</div>
+                <div class="code-name">#icon-huangguan2</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

odcs2.com/src/assets/font/iconfont.css

@@ -0,0 +1,37 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4325432 */
+  /* Color fonts */
+  src: 
+       url('iconfont.woff2?t=1699606514058') format('woff2'),
+       url('iconfont.woff?t=1699606514058') format('woff'),
+       url('iconfont.ttf?t=1699606514058') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xiaochou:before {
+  content: "\e656";
+}
+
+.icon-huangguan:before {
+  content: "\e607";
+}
+
+.icon-huangguan1:before {
+  content: "\e676";
+}
+
+.icon-beijingyinle-tiaopi:before {
+  content: "\e626";
+}
+
+.icon-huangguan2:before {
+  content: "\e654";
+}
+

odcs2.com/src/assets/font/iconfont.json

@@ -0,0 +1,44 @@
+{
+  "id": "4325432",
+  "name": "小丑",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "5456858",
+      "name": "小丑",
+      "font_class": "xiaochou",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "7676678",
+      "name": "皇冠",
+      "font_class": "huangguan",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "8993665",
+      "name": "皇冠",
+      "font_class": "huangguan1",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "18063756",
+      "name": "背景音乐-调皮",
+      "font_class": "beijingyinle-tiaopi",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "33439583",
+      "name": "皇冠",
+      "font_class": "huangguan2",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    }
+  ]
+}

odcs2.com/src/assets/image/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705386971005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4969" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z" fill="#727477" p-id="4970"></path></svg>