客服qq修改

src/assets/scss/_mixin.scss

@@ -1,259 +1,259 @@
-@import '~@/assets/scss/_setting.scss';
-
-@function toUnit($v) {
-  @return $v* 1px;
-}
-
-@function percent($up, $down) {
-  @return ($up/$down);
-}
-
-@mixin wh($w, $h, $l:false, $t:false, $f:false) {
-  width: toUnit($w);
-  height: toUnit($h);
-
-  @if $t {
-    text-align: center;
-  }
-
-  @if $l==true {
-    line-height: toUnit($h);
-  }
-
-  @else if $l {
-    line-height: toUnit($l);
-  }
-
-  @if $f {
-    font-size: toUnit($f);
-  }
-}
-
-
-/* 清除浮动 */
-@mixin clearfix {
-  &:after {
-    clear: both;
-    content: '.';
-    display: block;
-    height: 0;
-    line-height: 0;
-    overflow: hidden;
-  }
-  *height: 1%;
-}
-
- 
-/*弹性盒子（传入null不设置该属性）*/
-@mixin flex( $justify: 0,$direction: row, $flex-wrap: 0,$align: center) {
-  display: flex;
-  
-  @if ($direction==1) {
-      flex-direction: column;
-  }
-  @if ($direction==2) {
-    flex-direction: column-reverse;
-}
-  @if ($justify == 0) {
-    justify-content: space-between;
-  }
-  @if ($justify == 1) {
-    justify-content: space-around;
-  }
-
-  @if ($align!=null) {
-      align-items: $align;
-  }
-  @if ($flex-wrap ==1) {
-    flex-wrap: nowrap;;
-}
-}
-
-/*绝对定位  参数顺序：上右下左*/
-@mixin positionAbsolute($top:null,$right:null,$bottom:null,$left:null) {
-position: absolute;
-@if ($left!="" & & $left!=null) {
-  left: $left;
-}
-@if ($right!="" & & $right!=null) {
-  right: $right;
-}
-@if ($top!="" & & $top!=null) {
-  top: $top;
-}
-@if ($bottom!="" & & $bottom!=null) {
-  bottom: $bottom;
-}
-}
-
-/*左浮动*/
-@mixin float-left($width:19%,$margin-right:1.2%) {
-width: $width;
-float: left;
-@if ($margin-right!=null) {
-  margin-right: $margin-right;
-}
-}
-
-/*右浮动*/
-@mixin float-Right($width:19%,$margin-left:1.2%) {
-width: $width;
-float: right;
-@if ($margin-left!=null) {
-  margin-left: $margin-left;
-}
-}
-
-/*渐变(从上到下）*/
-@mixin linear-gradient($direction:bottom,$color1:transparent,$color2:#306eff,$color3:transparent) {
-//background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
-background: -o-linear-gradient($direction, $color1, $color2, $color3); /* Opera 11.1 - 12.0 */
-background: -moz-linear-gradient($direction, $color1, $color2, $color3); /* Firefox 3.6 - 15 */
-background: linear-gradient(to $direction, $color1, $color2, $color3); /* 标准的语法 */
-}
-
-/* 行高 */
-@mixin line-height($height:30px,$line-height:30px) {
-@if ($height != null) {
-  height: $height;
-}
-@if ($line-height!=null) {
-  line-height: $line-height;
-}
-}
-
-/* 画三角形 */
-@mixin triangle($width:10px,$direction:top,$color:$pink) {
-width: 0;
-border: $width solid transparent;
-@if ($direction == top) { // 上三角
-  border-bottom-color: $color;
-}
-@if ($direction == bottom) { // 下三角
-  border-top-color: $color;
-}
-@if ($direction == left) { // 左三角
-  border-right-color: $color;
-}
-@if ($direction == right) { // 右三角
-  border-left-color: $color;
-}
-}
-
-/* 文本阴影 */
-@mixin text-show($h-shadow:0px, $v-shadow:0px, $blur:10px, $color:rgba(0,180,255,0.7)) {
-text-shadow: $h-shadow $v-shadow $blur $color;
-}
-
-/* 链接样式 */
-@mixin hoverStyle($style:(color:#d9fdff),$hoverStyle:(color:#306eff)) {
-text-decoration: none;
-@each $key, $value in $style {
-  #{$key}: #{$value};
-}
-@if ($hoverStyle!=null & & $hoverStyle!="") {
-  &:hover {
-    @each $key, $value in $hoverStyle {
-      #{$key}: #{$value};
-    }
-  }
-}
-}
-
-/* 定义滚动条样式 圆角和阴影不需要则传入null */
-@mixin scrollBar($width:10px,$height:10px,$outColor:$bgColor,$innerColor:$bgGrey,$radius:5px,$shadow:null) {
-/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-&::-webkit-scrollbar {
-  width: $width;
-  height: $height;
-  background-color: $outColor;
-}
-
-/*定义滚动条轨道 内阴影+圆角*/
-&::-webkit-scrollbar-track {
-  @if ($shadow!=null) {
-    -webkit-box-shadow: $shadow;
-  }
-  @if ($radius!=null) {
-    border-radius: $radius;
-  }
-  background-color: $outColor;
-}
-
-/*定义滑块 内阴影+圆角*/
-&::-webkit-scrollbar-thumb {
-  @if ($shadow!=null) {
-    -webkit-box-shadow: $shadow;
-  }
-  @if ($radius!=null) {
-    border-radius: $radius;
-  }
-  background-color: $innerColor;
-  border: 1px solid $innerColor;
-}
-}
-
-/* css3动画 默认3s宽度到200px */
-@mixin animation($from:(width:0px),$to:(width:200px),$name:mymove,$animate:mymove 2s 1 linear infinite) {
--webkit-animation: $animate;
--o-animation: $animate;
-animation: $animate;
-@keyframes #{$name}
-{
-  from {
-    @each $key, $value in $from {
-      #{$key}: #{$value};
-    }
-  }
-  to {
-    @each $key, $value in $to {
-      #{$key}: #{$value};
-    }
-  }
-}
-
-@-webkit-keyframes #{$name}
-{
-  from {
-    @each $key, $value in $from {
-      $key: $value;
-    }
-  }
-  to {
-    @each $key, $value in $to {
-      $key: $value;
-    }
-  }
-}
-}
-
-/* 圆形盒子 */
-@mixin circle($size: 11px,$bg: #fff) {
-border-radius: 50%;
-width: $size;
-height: $size;
-line-height: $size;
-text-align: center;
-background: $bg;
-}
-
-/* placeholder */
-@mixin placeholder($color: #bbb) {
-  // Firefox
-  &::-moz-placeholder {
-    color: $color;
-    opacity: 1; 
-  }
-  // Internet Explorer 10+
-  &:-ms-input-placeholder {
-    color: $color;
-  }
-  // Safari and Chrome
-  &::-webkit-input-placeholder {
-    color: $color;
-  }
-
-  &:placeholder-shown {
-    text-overflow: ellipsis;
-  }
+@import '~@/assets/scss/_setting.scss';
+
+@function toUnit($v) {
+  @return $v* 1px;
+}
+
+@function percent($up, $down) {
+  @return ($up/$down);
+}
+
+@mixin wh($w, $h, $l:false, $t:false, $f:false) {
+  width: toUnit($w);
+  height: toUnit($h);
+
+  @if $t {
+    text-align: center;
+  }
+
+  @if $l==true {
+    line-height: toUnit($h);
+  }
+
+  @else if $l {
+    line-height: toUnit($l);
+  }
+
+  @if $f {
+    font-size: toUnit($f);
+  }
+}
+
+
+/* 清除浮动 */
+@mixin clearfix {
+  &:after {
+    clear: both;
+    content: '.';
+    display: block;
+    height: 0;
+    line-height: 0;
+    overflow: hidden;
+  }
+  *height: 1%;
+}
+
+ 
+/*弹性盒子（传入null不设置该属性）*/
+@mixin flex( $justify: 0,$direction: row, $flex-wrap: 0,$align: center) {
+  display: flex;
+  
+  @if ($direction==1) {
+      flex-direction: column;
+  }
+  @if ($direction==2) {
+    flex-direction: column-reverse;
+}
+  @if ($justify == 0) {
+    justify-content: space-between;
+  }
+  @if ($justify == 1) {
+    justify-content: space-around;
+  }
+
+  @if ($align!=null) {
+      align-items: $align;
+  }
+  @if ($flex-wrap ==1) {
+    flex-wrap: nowrap;;
+}
+}
+
+/*绝对定位  参数顺序：上右下左*/
+@mixin positionAbsolute($top:null,$right:null,$bottom:null,$left:null) {
+position: absolute;
+@if ($left!="" & & $left!=null) {
+  left: $left;
+}
+@if ($right!="" & & $right!=null) {
+  right: $right;
+}
+@if ($top!="" & & $top!=null) {
+  top: $top;
+}
+@if ($bottom!="" & & $bottom!=null) {
+  bottom: $bottom;
+}
+}
+
+/*左浮动*/
+@mixin float-left($width:19%,$margin-right:1.2%) {
+width: $width;
+float: left;
+@if ($margin-right!=null) {
+  margin-right: $margin-right;
+}
+}
+
+/*右浮动*/
+@mixin float-Right($width:19%,$margin-left:1.2%) {
+width: $width;
+float: right;
+@if ($margin-left!=null) {
+  margin-left: $margin-left;
+}
+}
+
+/*渐变(从上到下）*/
+@mixin linear-gradient($direction:bottom,$color1:transparent,$color2:#306eff,$color3:transparent) {
+//background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
+background: -o-linear-gradient($direction, $color1, $color2, $color3); /* Opera 11.1 - 12.0 */
+background: -moz-linear-gradient($direction, $color1, $color2, $color3); /* Firefox 3.6 - 15 */
+background: linear-gradient(to $direction, $color1, $color2, $color3); /* 标准的语法 */
+}
+
+/* 行高 */
+@mixin line-height($height:30px,$line-height:30px) {
+@if ($height != null) {
+  height: $height;
+}
+@if ($line-height!=null) {
+  line-height: $line-height;
+}
+}
+
+/* 画三角形 */
+@mixin triangle($width:10px,$direction:top,$color:$pink) {
+width: 0;
+border: $width solid transparent;
+@if ($direction == top) { // 上三角
+  border-bottom-color: $color;
+}
+@if ($direction == bottom) { // 下三角
+  border-top-color: $color;
+}
+@if ($direction == left) { // 左三角
+  border-right-color: $color;
+}
+@if ($direction == right) { // 右三角
+  border-left-color: $color;
+}
+}
+
+/* 文本阴影 */
+@mixin text-show($h-shadow:0px, $v-shadow:0px, $blur:10px, $color:rgba(0,180,255,0.7)) {
+text-shadow: $h-shadow $v-shadow $blur $color;
+}
+
+/* 链接样式 */
+@mixin hoverStyle($style:(color:#d9fdff),$hoverStyle:(color:#306eff)) {
+text-decoration: none;
+@each $key, $value in $style {
+  #{$key}: #{$value};
+}
+@if ($hoverStyle!=null & & $hoverStyle!="") {
+  &:hover {
+    @each $key, $value in $hoverStyle {
+      #{$key}: #{$value};
+    }
+  }
+}
+}
+
+/* 定义滚动条样式 圆角和阴影不需要则传入null */
+@mixin scrollBar($width:10px,$height:10px,$outColor:$bgColor,$innerColor:$bgGrey,$radius:5px,$shadow:null) {
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+&::-webkit-scrollbar {
+  width: $width;
+  height: $height;
+  background-color: $outColor;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+&::-webkit-scrollbar-track {
+  @if ($shadow!=null) {
+    -webkit-box-shadow: $shadow;
+  }
+  @if ($radius!=null) {
+    border-radius: $radius;
+  }
+  background-color: $outColor;
+}
+
+/*定义滑块 内阴影+圆角*/
+&::-webkit-scrollbar-thumb {
+  @if ($shadow!=null) {
+    -webkit-box-shadow: $shadow;
+  }
+  @if ($radius!=null) {
+    border-radius: $radius;
+  }
+  background-color: $innerColor;
+  border: 1px solid $innerColor;
+}
+}
+
+/* css3动画 默认3s宽度到200px */
+@mixin animation($from:(width:0px),$to:(width:200px),$name:mymove,$animate:mymove 2s 1 linear infinite) {
+-webkit-animation: $animate;
+-o-animation: $animate;
+animation: $animate;
+@keyframes #{$name}
+{
+  from {
+    @each $key, $value in $from {
+      #{$key}: #{$value};
+    }
+  }
+  to {
+    @each $key, $value in $to {
+      #{$key}: #{$value};
+    }
+  }
+}
+
+@-webkit-keyframes #{$name}
+{
+  from {
+    @each $key, $value in $from {
+      $key: $value;
+    }
+  }
+  to {
+    @each $key, $value in $to {
+      $key: $value;
+    }
+  }
+}
+}
+
+/* 圆形盒子 */
+@mixin circle($size: 11px,$bg: #fff) {
+border-radius: 50%;
+width: $size;
+height: $size;
+line-height: $size;
+text-align: center;
+background: $bg;
+}
+
+/* placeholder */
+@mixin placeholder($color: #bbb) {
+  // Firefox
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1; 
+  }
+  // Internet Explorer 10+
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  // Safari and Chrome
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+
+  &:placeholder-shown {
+    text-overflow: ellipsis;
+  }
 }

src/components/MobileCom.vue

@@ -10,7 +10,7 @@
                     : 'm_search'
             })" /></p>
 
-            <div class="psa" style="bottom: 0;left: 0; z-index: 999;color: #ed8c0f;">客服qq：2881771586</div>
+            <div class="psa" style="bottom: 0;left: 0; z-index: 999;color: #ed8c0f;">客服qq：2580955093</div>
         </div>
         <div class="right_menu df aic jcc psr">
             <van-icon name="bars" size="26" />

src/layout/header.vue

@@ -33,7 +33,7 @@
         </el-dropdown>
       </router-link>
     </nav>
-    <div class="w1000 df aic jcc" style="margin-top: 8px;padding: 10px 0; background-color: #fff;font-size: 16px;color: #ed8c0f;">客服qq：2881771586</div>
+    <div class="w1000 df aic jcc" style="padding-top: 8px;padding: 10px 0; background-color: #fff;font-size: 16px;color: #ed8c0f;">客服qq：2580955093</div>
   </div>
 </template>
 

src/view/m_views/index/index.vue

@@ -9,7 +9,7 @@
             <van-search shape='round' @click="router.push({ path: 'm_search' })" />
         </div>
 
-        <div class="df aic jcc" style="color: #ed8c0f;margin: 10px auto; font-size: 14px;">客服qq：2881771586</div>
+        <div class="df aic jcc" style="color: #ed8c0f;margin: 10px auto; font-size: 14px;">客服qq：2580955093</div>
 
         <!-- 轮播图 -->
         <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">

src/view/p_views/index/index.vue

@@ -1,71 +1,71 @@
-<template>
-    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
-
-    <div v-else class="w1000">
-        <!-- 热门游戏 -->
-        <div v-if="gameHot.length > 0" class="game_list">
-            <h2>热门游戏</h2>
-            <IndexList :list="gameHot" :prefix="prefix"></IndexList>
-        </div>
-        <!-- 推荐游戏 -->
-        <div v-if="gameRecommand.length > 0" class="game_list">
-            <h2>推荐游戏</h2>
-            <IndexList :list="gameRecommand" :prefix="prefix"></IndexList>
-        </div>
-
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { getIndexGameHot, getIndexGameRecommand } from '@/api/index'
-import Message from '@/utils/Message'
-import IndexList from '@/components/IndexList.vue'
-
-const gameHot: any = ref([])
-const gameRecommand: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-
-onMounted(async () => {
-    await getIndexGameHot().then(res => {
-        console.log('热门游戏', res.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameHot.value = res.data.data.lists
-            prefix.value = res.data.data.prefix
-            isLoading.value = false
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
-
-    await getIndexGameRecommand().then(res => {
-        console.log('推荐游戏', res.data.data);
-        if (res.data.code === 200 && res.data.data) {
-            gameRecommand.value = res.data.data.lists
-            prefix.value = res.data.data.prefix
-            isLoading.value = false
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
-})
-
-</script>
-
-<style scoped lang="scss">
-.game_list {
-    box-sizing: border-box;
-    // padding: 20px;
-    background-color: #fff;
-    margin: 15px auto 20px;
-
-    h2 {
-        font-size: 28px;
-        font-weight: normal;
-        height: 30px;
-        padding: 30px;
-    }
-}
+<template>
+    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
+
+    <div v-else class="w1000">
+        <!-- 热门游戏 -->
+        <div v-if="gameHot.length > 0" class="game_list">
+            <h2>热门游戏</h2>
+            <IndexList :list="gameHot" :prefix="prefix"></IndexList>
+        </div>
+        <!-- 推荐游戏 -->
+        <div v-if="gameRecommand.length > 0" class="game_list">
+            <h2>推荐游戏</h2>
+            <IndexList :list="gameRecommand" :prefix="prefix"></IndexList>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { getIndexGameHot, getIndexGameRecommand } from '@/api/index'
+import Message from '@/utils/Message'
+import IndexList from '@/components/IndexList.vue'
+
+const gameHot: any = ref([])
+const gameRecommand: any = ref([])
+const prefix = ref<string>('')
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+
+onMounted(async () => {
+    await getIndexGameHot().then(res => {
+        console.log('热门游戏', res.data);
+        if (res.data.code === 200 && res.data.data) {
+            gameHot.value = res.data.data.lists
+            prefix.value = res.data.data.prefix
+            isLoading.value = false
+        }
+    }).catch(err => {
+        Message.error(err.data.msg)
+    })
+
+    await getIndexGameRecommand().then(res => {
+        console.log('推荐游戏', res.data.data);
+        if (res.data.code === 200 && res.data.data) {
+            gameRecommand.value = res.data.data.lists
+            prefix.value = res.data.data.prefix
+            isLoading.value = false
+        }
+    }).catch(err => {
+        Message.error(err.data.msg)
+    })
+})
+
+</script>
+
+<style scoped lang="scss">
+.game_list {
+    box-sizing: border-box;
+    // padding: 20px;
+    background-color: #fff;
+    margin: 15px auto 20px;
+
+    h2 {
+        font-size: 28px;
+        font-weight: normal;
+        height: 30px;
+        padding: 30px;
+    }
+}
 </style>

vite.config.ts

@@ -1,76 +1,69 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { resolve } from 'path'
-// vant插件
-import Components from "unplugin-vue-components/vite";
-import { VantResolver } from "unplugin-vue-components/resolvers";
-// 引入vite兼容浏览器插件
-import legacy from '@vitejs/plugin-legacy'
-
-function pathResolve(dir) {
-  return resolve(__dirname, '.', dir)
-}
-
-export default defineConfig({
-  base: './',
-  plugins: [
-    vue(),
-    Components({
-      resolvers: [VantResolver()],
-    }),
-    // vite兼容低版本浏览器 如UC浏览器 内核55
-    legacy({
-      targets: ['chrome 50', 'ie >= 11'],
-      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // regenerator-runtime/runtime   @dian/polyfill
-      renderLegacyChunks: true,
-      polyfills: [
-        'es.symbol',
-        'es.array.filter',
-        'es.promise',
-        'es.promise.finally',
-        'es/map',
-        'es/set',
-        'es.array.for-each',
-        'es.object.define-properties',
-        'es.object.define-property',
-        'es.object.get-own-property-descriptor',
-        'es.object.get-own-property-descriptors',
-        'es.object.keys',
-        'es.object.to-string',
-        'web.dom-collections.for-each',
-        'esnext.global-this',
-        'esnext.string.match-all',
-        // // 这个无法处理
-        // 'es.string.replace-all'
-      ],
-      // 在polyfills外可以执行
-      modernPolyfills: ['es.string.replace-all']
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': pathResolve('src')
-    },
-  },
-  
-  server: {
-    host: '0.0.0.0',
-    cors: true,
-    open: true,
-    proxy: {
-      // 跨域前缀写法 
-      '/api': {
-        target: 'http://localhost:5173/',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ''),
-      },
-    },
-  },
-
-  // css: {
-  //   preprocessorOptions: {
-  //     scss: {
-  //       additionalData: "@import '@/assets/scss/_index.scss';",
-  //     },
-  //   },
-})
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+// vant插件
+import Components from "unplugin-vue-components/vite";
+import { VantResolver } from "unplugin-vue-components/resolvers";
+// 引入vite兼容浏览器插件
+import legacy from '@vitejs/plugin-legacy'
+
+function pathResolve(dir) {
+  return resolve(__dirname, '.', dir)
+}
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [VantResolver()],
+    }),
+    // vite兼容低版本浏览器 如UC浏览器 内核55
+    legacy({
+      targets: ['chrome 50', 'ie >= 11'],
+      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // regenerator-runtime/runtime   @dian/polyfill
+      renderLegacyChunks: true,
+      polyfills: [
+        'es.symbol',
+        'es.array.filter',
+        'es.promise',
+        'es.promise.finally',
+        'es/map',
+        'es/set',
+        'es.array.for-each',
+        'es.object.define-properties',
+        'es.object.define-property',
+        'es.object.get-own-property-descriptor',
+        'es.object.get-own-property-descriptors',
+        'es.object.keys',
+        'es.object.to-string',
+        'web.dom-collections.for-each',
+        'esnext.global-this',
+        'esnext.string.match-all',
+        // // 这个无法处理
+        // 'es.string.replace-all'
+      ],
+      // 在polyfills外可以执行
+      modernPolyfills: ['es.string.replace-all']
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': pathResolve('src')
+    },
+  },
+  
+  server: {
+    host: '0.0.0.0',
+    cors: true,
+    open: true,
+    proxy: {
+      // 跨域前缀写法 
+      '/api': {
+        target: 'http://192.168.99.223:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+})