.

src/main/nine-space/.eslintrc.js

@@ -1,17 +1,17 @@
 module.exports = {
-    root: true,
-    env: {
-        node: true
-    },
-    extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
-    parserOptions: {
-        parser: 'babel-eslint'
-    },
-    rules: {
-        'no-console': 'off',
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-        'no-unused-vars': 'off',
-        'no-empty': ['error', { allowEmptyCatch: true }],
-        'vue/custom-event-name-casing': 0
-    }
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  rules: {
+    "no-console": "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-unused-vars": "off",
+    "no-empty": ["error", { allowEmptyCatch: true }],
+    "vue/custom-event-name-casing": 0,
+  },
 };

src/main/nine-space/.prettierrc.js

@@ -1,22 +0,0 @@
-module.exports = {
-    printWidth: 120,
-    singleQuote: true,
-    tabWidth: 4,
-    arrowParens: 'avoid',
-    trailingComma: 'none',
-    endOfLine: 'auto',
-    overrides: [
-        {
-            files: '*.html',
-            options: {
-                parser: 'html'
-            }
-        },
-        {
-            files: '*.vue',
-            options: {
-                parser: 'vue'
-            }
-        }
-    ]
-};

src/main/nine-space/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-    presets: ['@vue/cli-plugin-babel/preset']
+  presets: ["@vue/cli-plugin-babel/preset"],
 };

src/main/nine-space/src/App.vue

@@ -1,108 +1,108 @@
 <template>
-    <div class="scroll-wrapper" ref="scroll">
-        <router-view class="scroll-content" ref="content" />
-        <!-- <app-bar></app-bar> -->
-    </div>
+  <div class="scroll-wrapper" ref="scroll">
+    <router-view class="scroll-content" ref="content" />
+    <!-- <app-bar></app-bar> -->
+  </div>
 </template>
 
 <script>
-import BetterScroll from 'better-scroll';
-import Pulldown from '@better-scroll/pull-down';
-import { computed } from '@vue/reactivity';
+import BetterScroll from "better-scroll";
+import Pulldown from "@better-scroll/pull-down";
+import { computed } from "@vue/reactivity";
 BetterScroll.use(Pulldown);
 export default {
-    name: 'App',
-    provide() {
-        return {
-            changeCheck: this.changeCheck,
-            bs: computed(() => this.bs)
-        };
+  name: "App",
+  provide() {
+    return {
+      changeCheck: this.changeCheck,
+      bs: computed(() => this.bs),
+    };
+  },
+  data() {
+    return {
+      beforePullDown: true,
+      finished: false,
+      loading: false,
+      refreshing: false,
+      checkEvent: null,
+      bs: null,
+      timer: null,
+    };
+  },
+  watch: {
+    $route() {
+      if (this.bs) {
+        if (this.timer) {
+          clearTimeout(this.timer);
+        }
+        this.timer = setTimeout(() => {
+          this.bs.refresh();
+          this.bs.scrollTo(0, 0);
+        }, 500);
+      }
     },
-    data() {
-        return {
-            beforePullDown: true,
-            finished: false,
-            loading: false,
-            refreshing: false,
-            checkEvent: null,
-            bs: null,
-            timer: null
-        };
+  },
+  mounted() {
+    this.timer = setTimeout(() => {
+      this.init();
+    }, 1000);
+  },
+  methods: {
+    init() {
+      this.bs = new BetterScroll(this.$refs.scroll, {
+        scrollY: true,
+        click: true,
+      });
     },
-    watch: {
-        $route() {
-            if (this.bs) {
-                if (this.timer) {
-                    clearTimeout(this.timer);
-                }
-                this.timer = setTimeout(() => {
-                    this.bs.refresh();
-                    this.bs.scrollTo(0, 0);
-                }, 500);
-            }
+    onLoad() {
+      this.loading = true;
+      if (this.checkEvent) {
+        this.checkEvent()
+          .then(() => {
+            this.loading = false;
+            this.bs.finishPullUp();
+            this.bs.closePullUp();
+            this.bs.refresh();
+          })
+          .catch(() => {
+            this.bs.finishPullUp();
+            this.loading = false;
+            this.bs.refresh();
+          });
+      } else {
+        this.loading = false;
+        if (this.bs) {
+          this.bs.finishPullUp();
+          // this.bs.closePullUp();
+          this.bs.refresh();
         }
+      }
     },
-    mounted() {
-        this.timer = setTimeout(() => {
-            this.init();
-        }, 1000);
+    changeCheck(found) {
+      if (found) {
+        this.checkEvent = found;
+        this.onRefresh();
+      } else {
+        this.checkEvent = null;
+      }
     },
-    methods: {
-        init() {
-            this.bs = new BetterScroll(this.$refs.scroll, {
-                scrollY: true,
-                click: true
-            });
-        },
-        onLoad() {
-            this.loading = true;
-            if (this.checkEvent) {
-                this.checkEvent()
-                    .then(() => {
-                        this.loading = false;
-                        this.bs.finishPullUp();
-                        this.bs.closePullUp();
-                        this.bs.refresh();
-                    })
-                    .catch(() => {
-                        this.bs.finishPullUp();
-                        this.loading = false;
-                        this.bs.refresh();
-                    });
-            } else {
-                this.loading = false;
-                if (this.bs) {
-                    this.bs.finishPullUp();
-                    // this.bs.closePullUp();
-                    this.bs.refresh();
-                }
-            }
-        },
-        changeCheck(found) {
-            if (found) {
-                this.checkEvent = found;
-                this.onRefresh();
-            } else {
-                this.checkEvent = null;
-            }
-        },
-        onRefresh() {
-            if (this.bs) {
-                this.bs.openPullUp();
-            }
-            this.onLoad();
-        }
-    }
+    onRefresh() {
+      if (this.bs) {
+        this.bs.openPullUp();
+      }
+      this.onLoad();
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .scroll-content {
-    min-height: 100vh;
-    box-sizing: border-box;
-    // padding-top: 46px;
+  min-height: 100vh;
+  box-sizing: border-box;
+  // padding-top: 46px;
 }
 .scroll-wrapper {
-    background-color: @bg;
+  background-color: @bg;
 }
 </style>

src/main/nine-space/src/components/AppBar.vue

@@ -1,27 +1,27 @@
 <template>
-    <van-nav-bar
-        title="第九空间"
-        fixed
-        left-text=" "
-        right-text=" "
-        :left-arrow="false"
-        ref="bar"
-        z-index="20"
-        safe-area-inset-top
-        :border="false"
-    />
+  <van-nav-bar
+    title="第九空间"
+    fixed
+    left-text=" "
+    right-text=" "
+    :left-arrow="false"
+    ref="bar"
+    z-index="20"
+    safe-area-inset-top
+    :border="false"
+  />
 </template>
 
 <script>
 export default {
-    mounted() {
-        this.$nextTick(() => {
-            document.body.appendChild(this.$refs.bar.$el);
-        });
-    },
-    unmounted() {
-        document.body.removeChild(this.$refs.bar.$el);
-    }
+  mounted() {
+    this.$nextTick(() => {
+      document.body.appendChild(this.$refs.bar.$el);
+    });
+  },
+  unmounted() {
+    document.body.removeChild(this.$refs.bar.$el);
+  },
 };
 </script>
 

src/main/nine-space/src/components/Driver.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="driver"></div>
+  <div class="driver"></div>
 </template>
 
 <script>
@@ -8,7 +8,7 @@ export default {};
 
 <style lang="less" scoped>
 .driver {
-    height: 5px;
-    background-color: @bg2;
+  height: 5px;
+  background-color: @bg2;
 }
 </style>

src/main/nine-space/src/components/HelloWorld.vue

@@ -1,118 +1,138 @@
 <template>
-    <div class="hello">
-        <h1>{{ msg }}</h1>
-        <p>
-            For a guide and recipes on how to configure / customize this project,<br />
-            check out the
-            <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-        </p>
-        <h3>Installed CLI Plugins</h3>
-        <ul>
-            <li>
-                <a
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-                    target="_blank"
-                    rel="noopener"
-                    >babel</a
-                >
-            </li>
-            <li>
-                <a
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
-                    target="_blank"
-                    rel="noopener"
-                    >pwa</a
-                >
-            </li>
-            <li>
-                <a
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-                    target="_blank"
-                    rel="noopener"
-                    >router</a
-                >
-            </li>
-            <li>
-                <a
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-                    target="_blank"
-                    rel="noopener"
-                    >vuex</a
-                >
-            </li>
-            <li>
-                <a
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-                    target="_blank"
-                    rel="noopener"
-                    >eslint</a
-                >
-            </li>
-        </ul>
-        <h3>Essential Links</h3>
-        <ul>
-            <li>
-                <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-            </li>
-            <li>
-                <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
-            </li>
-            <li>
-                <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
-            </li>
-            <li>
-                <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
-            </li>
-            <li>
-                <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-            </li>
-        </ul>
-        <h3>Ecosystem</h3>
-        <ul>
-            <li>
-                <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
-            </li>
-            <li>
-                <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-            </li>
-            <li>
-                <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener"
-                    >vue-devtools</a
-                >
-            </li>
-            <li>
-                <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
-            </li>
-            <li>
-                <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
-            </li>
-        </ul>
-    </div>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
+          target="_blank"
+          rel="noopener"
+          >pwa</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+          target="_blank"
+          rel="noopener"
+          >vuex</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+          >vue-devtools</a
+        >
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'HelloWorld',
-    props: {
-        msg: String
-    }
+  name: "HelloWorld",
+  props: {
+    msg: String,
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
 h3 {
-    margin: 40px 0 0;
+  margin: 40px 0 0;
 }
 ul {
-    list-style-type: none;
-    padding: 0;
+  list-style-type: none;
+  padding: 0;
 }
 li {
-    display: inline-block;
-    margin: 0 10px;
+  display: inline-block;
+  margin: 0 10px;
 }
 a {
-    color: #42b983;
+  color: #42b983;
 }
 </style>

src/main/nine-space/src/components/LikeButton.vue

@@ -1,83 +1,86 @@
 <template>
-    <div class="like" @click.stop="like">
-        <img v-if="isLike" src="../assets/svgs/like.svg" alt="" />
-        <img v-else src="../assets/svgs/dislike.svg" alt="" />
-        <span><slot>16</slot></span>
-    </div>
+  <div class="like" @click.stop="like">
+    <img v-if="isLike" src="../assets/svgs/like.svg" alt="" />
+    <img v-else src="../assets/svgs/dislike.svg" alt="" />
+    <span><slot>16</slot></span>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        isLike: {
-            type: Boolean,
-            default: false
-        }
+  props: {
+    isLike: {
+      type: Boolean,
+      default: false,
     },
-    methods: {
-        like() {
-            this.$el.children[0].className += 'rubberBand';
-            setTimeout(() => {
-                this.$el.children[0].className = this.$el.children[0].className.replace(/rubberBand/g, '');
-            }, 1000);
-        }
-    }
+  },
+  methods: {
+    like() {
+      this.$el.children[0].className += "rubberBand";
+      setTimeout(() => {
+        this.$el.children[0].className = this.$el.children[0].className.replace(
+          /rubberBand/g,
+          ""
+        );
+      }, 1000);
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .like {
-    display: inline-block;
-    color: #949699;
-    line-height: 24px;
+  display: inline-block;
+  color: #949699;
+  line-height: 24px;
 
-    img {
-        vertical-align: middle;
-        margin-right: 3px;
-    }
+  img {
+    vertical-align: middle;
+    margin-right: 3px;
+  }
 
-    span {
-        vertical-align: middle;
-    }
+  span {
+    vertical-align: middle;
+  }
 }
 
 @keyframes rubberBand {
-    from {
-        -webkit-transform: scale3d(1, 1, 1);
-        transform: scale3d(1, 1, 1);
-    }
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
 
-    30% {
-        -webkit-transform: scale3d(1.25, 0.75, 1);
-        transform: scale3d(1.25, 0.75, 1);
-    }
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
 
-    40% {
-        -webkit-transform: scale3d(0.75, 1.25, 1);
-        transform: scale3d(0.75, 1.25, 1);
-    }
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
 
-    50% {
-        -webkit-transform: scale3d(1.15, 0.85, 1);
-        transform: scale3d(1.15, 0.85, 1);
-    }
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
 
-    65% {
-        -webkit-transform: scale3d(0.95, 1.05, 1);
-        transform: scale3d(0.95, 1.05, 1);
-    }
+  65% {
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
+  }
 
-    75% {
-        -webkit-transform: scale3d(1.05, 0.95, 1);
-        transform: scale3d(1.05, 0.95, 1);
-    }
+  75% {
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
+  }
 
-    to {
-        -webkit-transform: scale3d(1, 1, 1);
-        transform: scale3d(1, 1, 1);
-    }
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
 }
 .rubberBand {
-    animation: rubberBand ease-in-out 1s;
+  animation: rubberBand ease-in-out 1s;
 }
 </style>

src/main/nine-space/src/components/PageTitle.vue

@@ -1,21 +1,27 @@
 <template>
-    <van-cell :title="title" :border="false" value="查看全部" :url="url" is-link />
+  <van-cell
+    :title="title"
+    :border="false"
+    value="查看全部"
+    :url="url"
+    is-link
+  />
 </template>
 
 <script>
 export default {
-    props: ['title', 'url']
+  props: ["title", "url"],
 };
 </script>
 
 <style lang="less" scoped>
 .van-cell {
-    /deep/ .van-cell__title {
-        span {
-            font-size: 20px;
-            font-family: ZhenyanGB-Regular, ZhenyanGB;
-        }
+  /deep/ .van-cell__title {
+    span {
+      font-size: 20px;
+      font-family: ZhenyanGB-Regular, ZhenyanGB;
     }
-    padding: 30px 16px 20px 16px;
+  }
+  padding: 30px 16px 20px 16px;
 }
 </style>

src/main/nine-space/src/components/creator/CreatorInfo.vue

@@ -1,154 +1,157 @@
 <template>
-    <div class="info">
-        <van-image
-            width="88"
-            height="88"
-            src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
-            fit="cover"
-            radius="100"
-        />
-
-        <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
-
-        <div class="content">
-            <div class="text1 van-ellipsis">创作者姓名</div>
-            <div class="text2 van-ellipsis--l2">介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</div>
-
-            <div class="text3">
-                <div class="sale" v-if="rank" :style="{ color: NOInfo.color }">
-                    <img class="icon" :src="NOInfo.img2" alt="" />
-                    <span>已售400</span>
-                    <i class="font_family icon-a-icon-dianzan2"></i>
-                </div>
-                <div class="text4">
-                    <span>粉丝</span>
-                    <span>233</span>
-                </div>
-                <van-button plain type="primary" size="mini" round>关注</van-button>
-            </div>
+  <div class="info">
+    <van-image
+      width="88"
+      height="88"
+      src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+      fit="cover"
+      radius="100"
+    />
+
+    <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
+
+    <div class="content">
+      <div class="text1 van-ellipsis">创作者姓名</div>
+      <div class="text2 van-ellipsis--l2">
+        介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍
+      </div>
+
+      <div class="text3">
+        <div class="sale" v-if="rank" :style="{ color: NOInfo.color }">
+          <img class="icon" :src="NOInfo.img2" alt="" />
+          <span>已售400</span>
+          <i class="font_family icon-a-icon-dianzan2"></i>
         </div>
+        <div class="text4">
+          <span>粉丝</span>
+          <span>233</span>
+        </div>
+        <van-button plain type="primary" size="mini" round>关注</van-button>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        rank: {
-            type: Number,
-            default: 0
-        }
+  props: {
+    rank: {
+      type: Number,
+      default: 0,
     },
-    computed: {
-        NOInfo() {
-            if (this.rank) {
-                const colors = ['#FF8E12', '#C37BFF', '#3ACEFF'];
-                return {
-                    img1: require(`../../assets/svgs/NO${this.rank}.svg`),
-                    img2: require(`../../assets/svgs/NOicon${this.rank}.svg`),
-                    color: colors[this.rank - 1]
-                };
-            }
-            return {};
-        }
-    }
+  },
+  computed: {
+    NOInfo() {
+      if (this.rank) {
+        const colors = ["#FF8E12", "#C37BFF", "#3ACEFF"];
+        return {
+          img1: require(`../../assets/svgs/NO${this.rank}.svg`),
+          img2: require(`../../assets/svgs/NOicon${this.rank}.svg`),
+          color: colors[this.rank - 1],
+        };
+      }
+      return {};
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .info {
-    display: flex;
-    padding: 24px 16px;
-    position: relative;
-
-    .content {
-        flex-grow: 1;
-        padding-left: 12px;
-
-        .text1 {
-            font-size: 16px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 24px;
-        }
+  display: flex;
+  padding: 24px 16px;
+  position: relative;
+
+  .content {
+    flex-grow: 1;
+    padding-left: 12px;
+
+    .text1 {
+      font-size: 16px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 24px;
+    }
 
-        .text2 {
-            font-size: 14px;
-            color: #939599;
-            line-height: 20px;
-            margin: 6px 0;
-        }
+    .text2 {
+      font-size: 14px;
+      color: #939599;
+      line-height: 20px;
+      margin: 6px 0;
+    }
 
-        .text3 {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .sale {
-                display: flex;
-                align-items: center;
-                font-size: 14px;
-                line-height: 24px;
-
-                .font_family {
-                    font-size: 18px;
-                    margin-left: 2px;
-                }
-
-                .icon {
-                    display: block;
-                    width: 18px;
-                }
-
-                span {
-                    transform: translateX(3px);
-                }
-            }
-
-            .van-button--mini {
-                min-width: 70px;
-                border: solid 0px transparent;
-                padding: 1px;
-                background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
-                background-origin: border-box;
-                box-sizing: border-box;
-                background-clip: content-box, border-box;
-            }
-
-            .text4 {
-                span {
-                    font-size: 14px;
-                    &:first-child {
-                        color: #939599;
-                        margin-right: 5px;
-                    }
-                }
-            }
+    .text3 {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .sale {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        line-height: 24px;
+
+        .font_family {
+          font-size: 18px;
+          margin-left: 2px;
         }
-    }
 
-    .van-image {
-        flex-shrink: 0;
-    }
+        .icon {
+          display: block;
+          width: 18px;
+        }
 
-    .NOImg {
-        position: absolute;
-        width: 98px;
-        display: block;
-        left: 10px;
-        top: 14px;
+        span {
+          transform: translateX(3px);
+        }
+      }
+
+      .van-button--mini {
+        min-width: 70px;
+        border: solid 0px transparent;
+        padding: 1px;
+        background-image: linear-gradient(@bg, @bg),
+          linear-gradient(135deg, #fdfb60, #ff8f3e);
+        background-origin: border-box;
+        box-sizing: border-box;
+        background-clip: content-box, border-box;
+      }
+
+      .text4 {
+        span {
+          font-size: 14px;
+          &:first-child {
+            color: #939599;
+            margin-right: 5px;
+          }
+        }
+      }
     }
+  }
+
+  .van-image {
+    flex-shrink: 0;
+  }
+
+  .NOImg {
+    position: absolute;
+    width: 98px;
+    display: block;
+    left: 10px;
+    top: 14px;
+  }
 }
 
 .info + .info {
-    position: relative;
-    &::before {
-        content: '';
-        position: absolute;
-        left: 8px;
-        right: 0;
-        top: 0;
-        height: 1px;
-        background-color: #202122;
-    }
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    left: 8px;
+    right: 0;
+    top: 0;
+    height: 1px;
+    background-color: #202122;
+  }
 }
 </style>

src/main/nine-space/src/components/product/productInfo.vue

@@ -1,80 +1,82 @@
 <template>
-    <div class="product" @click="click">
-        <van-image
-            width="100%"
-            height="calc(45vw - 21.6px)"
-            src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
-            fit="cover"
-        />
+  <div class="product" @click="click">
+    <van-image
+      width="100%"
+      height="calc(45vw - 21.6px)"
+      src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+      fit="cover"
+    />
 
-        <div class="content">
-            <div class="name van-ellipsis">游戏《百分之一》游戏《百分之一》游戏《百分之一》</div>
-            <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
-            <div class="text">
-                <div class="text1">已售 23份</div>
-                <like-button>20</like-button>
-            </div>
-        </div>
+    <div class="content">
+      <div class="name van-ellipsis">
+        游戏《百分之一》游戏《百分之一》游戏《百分之一》
+      </div>
+      <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
+      <div class="text">
+        <div class="text1">已售 23份</div>
+        <like-button>20</like-button>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    setup() {
-        const click = function () {
-            console.log('wyt6w');
-        };
+  setup() {
+    const click = function () {
+      console.log("wyt6w");
+    };
 
-        return { click };
-    }
+    return { click };
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .product {
-    width: calc(50vw - 24px);
-    margin: 8px;
-    background-color: @bg2;
-    display: inline-block;
+  width: calc(50vw - 24px);
+  margin: 8px;
+  background-color: @bg2;
+  display: inline-block;
 
-    .van-image {
-        border-radius: 8px 8px 0px 0px;
-        overflow: hidden;
-        display: block;
-    }
-    .content {
-        padding: 10px;
+  .van-image {
+    border-radius: 8px 8px 0px 0px;
+    overflow: hidden;
+    display: block;
+  }
+  .content {
+    padding: 10px;
 
-        .name {
-            font-size: 16px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 24px;
-        }
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 24px;
+    }
 
-        .price {
-            font-size: 24px;
-            font-family: OSP;
-            color: @prim;
-            line-height: 22px;
-            padding: 7px 0;
+    .price {
+      font-size: 24px;
+      font-family: OSP;
+      color: @prim;
+      line-height: 22px;
+      padding: 7px 0;
 
-            i {
-                vertical-align: text-bottom;
-                font-size: 10px;
-            }
-        }
+      i {
+        vertical-align: text-bottom;
+        font-size: 10px;
+      }
     }
+  }
 
-    .text {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .text1 {
-            font-weight: 400;
-            color: #939599;
-            line-height: 24px;
-        }
+  .text {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .text1 {
+      font-weight: 400;
+      color: #939599;
+      line-height: 24px;
     }
+  }
 }
 </style>

src/main/nine-space/src/components/product/productSmall.vue

@@ -1,77 +1,79 @@
 <template>
-    <div class="product" @click="click">
-        <van-image
-            width="100%"
-            height="calc(37.2vw - 17.9px)"
-            src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
-            fit="cover"
-        />
+  <div class="product" @click="click">
+    <van-image
+      width="100%"
+      height="calc(37.2vw - 17.9px)"
+      src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+      fit="cover"
+    />
 
-        <div class="content">
-            <div class="name van-ellipsis">游戏《百分之一》游戏《百分之一》游戏《百分之一》</div>
-            <div class="text">
-                <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
-                <like-button>20</like-button>
-            </div>
-        </div>
+    <div class="content">
+      <div class="name van-ellipsis">
+        游戏《百分之一》游戏《百分之一》游戏《百分之一》
+      </div>
+      <div class="text">
+        <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
+        <like-button>20</like-button>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    setup() {
-        const click = function () {
-            console.log('wyt6w');
-        };
+  setup() {
+    const click = function () {
+      console.log("wyt6w");
+    };
 
-        return { click };
-    }
+    return { click };
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .product {
-    width: calc(50vw - 24px);
-    margin: 0 8px;
-    position: relative;
+  width: calc(50vw - 24px);
+  margin: 0 8px;
+  position: relative;
 
-    .van-image {
-        border-radius: 8px;
-        overflow: hidden;
-        display: block;
-    }
-    .content {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: 3px 10px;
-        background-color: rgba(0, 0, 0, 0.6);
+  .van-image {
+    border-radius: 8px;
+    overflow: hidden;
+    display: block;
+  }
+  .content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 3px 10px;
+    background-color: rgba(0, 0, 0, 0.6);
 
-        .name {
-            font-size: 16px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 24px;
-        }
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 24px;
+    }
 
-        .price {
-            font-size: 24px;
-            font-family: OSP;
-            color: @prim;
-            line-height: 22px;
+    .price {
+      font-size: 24px;
+      font-family: OSP;
+      color: @prim;
+      line-height: 22px;
 
-            i {
-                vertical-align: text-bottom;
-                font-size: 10px;
-            }
-        }
+      i {
+        vertical-align: text-bottom;
+        font-size: 10px;
+      }
     }
+  }
 
-    .text {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
+  .text {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 </style>

src/main/nine-space/src/main.js

@@ -1,29 +1,29 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import './registerServiceWorker';
-import router from './router';
-import store from './store';
-import Vant from 'vant';
-import { ConfigProvider } from 'vant';
-import 'vant/lib/index.css';
-import './styles/app.less';
-import './styles/font.less';
-import http from './plugins/http';
-import PageTitle from './components/PageTitle';
-import LikeButton from './components/LikeButton.vue';
-import Driver from './components/Driver.vue';
-import common from './mixins/common';
-import VueClipboard from 'vue-clipboard2';
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+import router from "./router";
+import store from "./store";
+import Vant from "vant";
+import { ConfigProvider } from "vant";
+import "vant/lib/index.css";
+import "./styles/app.less";
+import "./styles/font.less";
+import http from "./plugins/http";
+import PageTitle from "./components/PageTitle";
+import LikeButton from "./components/LikeButton.vue";
+import Driver from "./components/Driver.vue";
+import common from "./mixins/common";
+import VueClipboard from "vue-clipboard2";
 
 createApp(App)
-    .use(Vant)
-    .use(http)
-    .use(ConfigProvider)
-    .use(VueClipboard)
-    .mixin(common)
-    .component('page-title', PageTitle)
-    .component('like-button', LikeButton)
-    .component('driver', Driver)
-    .use(store)
-    .use(router)
-    .mount('#app');
+  .use(Vant)
+  .use(http)
+  .use(ConfigProvider)
+  .use(VueClipboard)
+  .mixin(common)
+  .component("page-title", PageTitle)
+  .component("like-button", LikeButton)
+  .component("driver", Driver)
+  .use(store)
+  .use(router)
+  .mount("#app");

src/main/nine-space/src/mixins/common.js

@@ -1,56 +1,56 @@
 export default {
-    computed: {
-        isLogin() {
-            return !!this.$store.state.userInfo;
-        },
-        authStatus() {
-            return this.$store.state.authStatus;
-        }
+  computed: {
+    isLogin() {
+      return !!this.$store.state.userInfo;
     },
-    data() {
-        return {
-            AuthStatus: []
-        };
+    authStatus() {
+      return this.$store.state.authStatus;
     },
-    methods: {
-        updateUser(info, sucess = true) {
-            if (info) {
-                return this.$http
-                    .post(
-                        '/user/save',
-                        {
-                            ...this.$store.state.userInfo,
-                            ...info
-                        },
-                        {
-                            body: 'json'
-                        }
-                    )
-                    .then(() => {
-                        return this.$store.dispatch('getUserInfo');
-                    })
-                    .then(() => {
-                        if (sucess) {
-                            this.$toast.success('更新成功');
-                        }
-                        return Promise.resolve();
-                    })
-                    .catch(e => {
-                        if (e) {
-                            this.$toast(e.error);
-                        }
-                        return Promise.reject();
-                    });
+  },
+  data() {
+    return {
+      AuthStatus: [],
+    };
+  },
+  methods: {
+    updateUser(info, sucess = true) {
+      if (info) {
+        return this.$http
+          .post(
+            "/user/save",
+            {
+              ...this.$store.state.userInfo,
+              ...info,
+            },
+            {
+              body: "json",
             }
-        },
-        updateFile(file) {
-            return this.$http
-                .post('/upload/base64', {
-                    base64: file.content
-                })
-                .then(res => {
-                    return Promise.resolve(res);
-                });
-        }
-    }
+          )
+          .then(() => {
+            return this.$store.dispatch("getUserInfo");
+          })
+          .then(() => {
+            if (sucess) {
+              this.$toast.success("更新成功");
+            }
+            return Promise.resolve();
+          })
+          .catch((e) => {
+            if (e) {
+              this.$toast(e.error);
+            }
+            return Promise.reject();
+          });
+      }
+    },
+    updateFile(file) {
+      return this.$http
+        .post("/upload/base64", {
+          base64: file.content,
+        })
+        .then((res) => {
+          return Promise.resolve(res);
+        });
+    },
+  },
 };

src/main/nine-space/src/mixins/phone.js

@@ -1,77 +1,77 @@
 //手机号码相关
 export default {
-    data() {
-        return {
-            phonePattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
-            isSend: false,
-            msgCode: '',
-            sendNum: 60,
-            timer: null
-        };
+  data() {
+    return {
+      phonePattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
+      isSend: false,
+      msgCode: "",
+      sendNum: 60,
+      timer: null,
+    };
+  },
+  methods: {
+    sendMsg(phone) {
+      this.isSend = true;
+      this.setTime(60);
+      this.$http
+        .get("/sms/sendVerify", {
+          phone: phone,
+        })
+        .then((res) => {
+          this.msgCode = res;
+          this.$toast.success("发送成功");
+        })
+        .catch((e) => {
+          if (e) {
+            this.$toast(e.error);
+          }
+          this.setTime(0);
+        });
     },
-    methods: {
-        sendMsg(phone) {
-            this.isSend = true;
-            this.setTime(60);
-            this.$http
-                .get('/sms/sendVerify', {
-                    phone: phone
-                })
-                .then(res => {
-                    this.msgCode = res;
-                    this.$toast.success('发送成功');
-                })
-                .catch(e => {
-                    if (e) {
-                        this.$toast(e.error);
-                    }
-                    this.setTime(0);
-                });
-        },
-        setTime(num) {
-            this.sendNum = num;
-            if (this.timer) {
-                clearTimeout(this.timer);
-            }
+    setTime(num) {
+      this.sendNum = num;
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
 
-            if (num <= 0) {
-                this.isSend = false;
-                return;
-            } else {
-                this.timer = setTimeout(() => {
-                    this.setTime(num - 1);
-                }, 1000);
-            }
-        },
-        verifyMsg(phone, code) {
-            return this.$http
-                .get('/sms/verify', {
-                    phone: phone,
-                    code: code
-                })
-                .catch(e => {
-                    if (e) {
-                        this.$toast(e.error);
-                    }
-                    return Promise.reject();
-                });
-        },
-        loginByPhone(phone, psd) {
-            return this.$http
-                .post('/auth/phonePwdLogin', {
-                    phone: phone,
-                    password: psd
-                })
-                .catch(e => {
-                    if (e) {
-                        this.$toast(e.error);
-                    }
-                    return Promise.reject();
-                })
-                .then(res => {
-                    localStorage.setItem('nineToken', res);
-                    return this.$store.dispatch('getUserInfo');
-                });
-        }
-    }
+      if (num <= 0) {
+        this.isSend = false;
+        return;
+      } else {
+        this.timer = setTimeout(() => {
+          this.setTime(num - 1);
+        }, 1000);
+      }
+    },
+    verifyMsg(phone, code) {
+      return this.$http
+        .get("/sms/verify", {
+          phone: phone,
+          code: code,
+        })
+        .catch((e) => {
+          if (e) {
+            this.$toast(e.error);
+          }
+          return Promise.reject();
+        });
+    },
+    loginByPhone(phone, psd) {
+      return this.$http
+        .post("/auth/phonePwdLogin", {
+          phone: phone,
+          password: psd,
+        })
+        .catch((e) => {
+          if (e) {
+            this.$toast(e.error);
+          }
+          return Promise.reject();
+        })
+        .then((res) => {
+          localStorage.setItem("nineToken", res);
+          return this.$store.dispatch("getUserInfo");
+        });
+    },
+  },
 };

src/main/nine-space/src/plugins/http.js

@@ -1,5 +1,5 @@
-import axios from 'axios';
-import qs from 'qs';
+import axios from "axios";
+import qs from "qs";
 /* eslint-disable */
 let baseUrl = "http://localhost:8080";
 switch (process.env.NODE_ENV) {

src/main/nine-space/src/registerServiceWorker.js

@@ -1,32 +1,34 @@
 /* eslint-disable no-console */
 
-import { register } from 'register-service-worker';
+import { register } from "register-service-worker";
 
-if (process.env.NODE_ENV === 'production') {
-    register(`${process.env.BASE_URL}service-worker.js`, {
-        ready() {
-            console.log(
-                'App is being served from cache by a service worker.\n' +
-                    'For more details, visit https://goo.gl/AFskqB'
-            );
-        },
-        registered() {
-            console.log('Service worker has been registered.');
-        },
-        cached() {
-            console.log('Content has been cached for offline use.');
-        },
-        updatefound() {
-            console.log('New content is downloading.');
-        },
-        updated() {
-            console.log('New content is available; please refresh.');
-        },
-        offline() {
-            console.log('No internet connection found. App is running in offline mode.');
-        },
-        error(error) {
-            console.error('Error during service worker registration:', error);
-        }
-    });
+if (process.env.NODE_ENV === "production") {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+          "For more details, visit https://goo.gl/AFskqB"
+      );
+    },
+    registered() {
+      console.log("Service worker has been registered.");
+    },
+    cached() {
+      console.log("Content has been cached for offline use.");
+    },
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated() {
+      console.log("New content is available; please refresh.");
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
+    },
+  });
 }

src/main/nine-space/src/router/Page.js

@@ -1,4 +1,4 @@
 export const Page = {
-    Login: 1,
-    Every: 2
+  Login: 1,
+  Every: 2,
 };

src/main/nine-space/src/router/index.js

@@ -1,134 +1,134 @@
-import { createRouter, createWebHistory } from 'vue-router';
-import store from '../store';
-import { Page } from './Page';
-import { Dialog } from 'vant';
+import { createRouter, createWebHistory } from "vue-router";
+import store from "../store";
+import { Page } from "./Page";
+import { Dialog } from "vant";
 
 const routes = [
-    {
-        path: '/',
-        redirect: 'home'
-    },
-    {
-        path: '/',
-        component: () => import('../views/Index.vue'),
-        children: [
-            {
-                path: '/home',
-                name: 'home',
-                component: () => import('../views/Home.vue'),
-                meta: {
-                    pageType: Page.Every,
-                    title: '第九空间'
-                }
-            },
-            {
-                path: '/discover',
-                name: 'discover',
-                component: () => import('../views/Discover.vue'),
-                meta: {
-                    pageType: Page.Every,
-                    title: '第九空间'
-                }
-            },
-            {
-                path: '/store',
-                name: 'store',
-                component: () => import('../views/Store.vue'),
-                meta: {
-                    pageType: Page.Every,
-                    title: '第九空间'
-                }
-            },
-            {
-                path: '/mine',
-                name: 'mine',
-                component: () => import('../views/Mine.vue'),
-                meta: {
-                    pageType: Page.Every,
-                    title: '第九空间'
-                }
-            }
-        ]
-    },
-    {
-        path: '/login',
-        name: 'userLogin',
-        component: () => import('../views/user/Login.vue'),
+  {
+    path: "/",
+    redirect: "home",
+  },
+  {
+    path: "/",
+    component: () => import("../views/Index.vue"),
+    children: [
+      {
+        path: "/home",
+        name: "home",
+        component: () => import("../views/Home.vue"),
         meta: {
-            pageType: Page.Login,
-            title: '登录'
-        }
-    },
-    {
-        path: '/register',
-        name: 'userRegister',
-        component: () => import('../views/user/Register.vue'),
+          pageType: Page.Every,
+          title: "第九空间",
+        },
+      },
+      {
+        path: "/discover",
+        name: "discover",
+        component: () => import("../views/Discover.vue"),
         meta: {
-            pageType: Page.Login,
-            title: '注册'
-        }
-    },
-    {
-        path: '/forget',
-        name: 'userForget',
-        component: () => import('../views/user/Forget.vue'),
+          pageType: Page.Every,
+          title: "第九空间",
+        },
+      },
+      {
+        path: "/store",
+        name: "store",
+        component: () => import("../views/Store.vue"),
         meta: {
-            pageType: Page.Login,
-            title: '忘记密码'
-        }
+          pageType: Page.Every,
+          title: "第九空间",
+        },
+      },
+      {
+        path: "/mine",
+        name: "mine",
+        component: () => import("../views/Mine.vue"),
+        meta: {
+          pageType: Page.Every,
+          title: "第九空间",
+        },
+      },
+    ],
+  },
+  {
+    path: "/login",
+    name: "userLogin",
+    component: () => import("../views/user/Login.vue"),
+    meta: {
+      pageType: Page.Login,
+      title: "登录",
     },
-    {
-        path: '/verified',
-        name: 'userVerified',
-        component: () => import('../views/user/Verified.vue')
+  },
+  {
+    path: "/register",
+    name: "userRegister",
+    component: () => import("../views/user/Register.vue"),
+    meta: {
+      pageType: Page.Login,
+      title: "注册",
     },
-    {
-        path: '/setting',
-        name: 'userSetting',
-        component: () => import('../views/user/Setting.vue')
+  },
+  {
+    path: "/forget",
+    name: "userForget",
+    component: () => import("../views/user/Forget.vue"),
+    meta: {
+      pageType: Page.Login,
+      title: "忘记密码",
     },
-    {
-        path: '/changeText',
-        name: 'userChangeText',
-        component: () => import('../views/user/ChangeText.vue')
+  },
+  {
+    path: "/verified",
+    name: "userVerified",
+    component: () => import("../views/user/Verified.vue"),
+  },
+  {
+    path: "/setting",
+    name: "userSetting",
+    component: () => import("../views/user/Setting.vue"),
+  },
+  {
+    path: "/changeText",
+    name: "userChangeText",
+    component: () => import("../views/user/ChangeText.vue"),
+  },
+  {
+    path: "/detail",
+    name: "detail",
+    component: () => import("../views/Detail.vue"),
+    meta: {
+      pageType: Page.Every,
+      title: "第九空间",
     },
-    {
-        path: '/detail',
-        name: 'detail',
-        component: () => import('../views/Detail.vue'),
-        meta: {
-            pageType: Page.Every,
-            title: '第九空间'
-        }
-    }
+  },
 ];
 
 const router = createRouter({
-    history: createWebHistory(process.env.BASE_URL),
-    routes
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
 });
 
 router.beforeEach((to, from, next) => {
-    if (!store.state.userInfo && to.meta.pageType !== Page.Login) {
-        store
-            .dispatch('getUserInfo')
-            .then(() => {
-                next();
-            })
-            .catch(() => {
-                if (to.meta.pageType != Page.Every) {
-                    Dialog.alert({
-                        message: '用户未登录'
-                    }).then(() => {
-                        next('/login');
-                    });
-                } else {
-                    next();
-                }
-            });
-    } else {
+  if (!store.state.userInfo && to.meta.pageType !== Page.Login) {
+    store
+      .dispatch("getUserInfo")
+      .then(() => {
         next();
-    }
+      })
+      .catch(() => {
+        if (to.meta.pageType != Page.Every) {
+          Dialog.alert({
+            message: "用户未登录",
+          }).then(() => {
+            next("/login");
+          });
+        } else {
+          next();
+        }
+      });
+  } else {
+    next();
+  }
 });
 
 export default router;

src/main/nine-space/src/store/index.js

@@ -1,32 +1,32 @@
-import { createStore } from 'vuex';
-import http from '../plugins/http';
+import { createStore } from "vuex";
+import http from "../plugins/http";
 
 export default createStore({
-    state: {
-        finished: false,
-        userInfo: null
+  state: {
+    finished: false,
+    userInfo: null,
+  },
+  mutations: {
+    setFinished(state, finished) {
+      state.finished = finished;
     },
-    mutations: {
-        setFinished(state, finished) {
-            state.finished = finished;
-        },
-        setUserInfo(state, userInfo) {
-            state.userInfo = userInfo;
-        }
+    setUserInfo(state, userInfo) {
+      state.userInfo = userInfo;
     },
-    actions: {
-        getUserInfo(context) {
-            return http.http
-                .get('/user/my')
-                .then(res => {
-                    context.commit('setUserInfo', res);
-                    return Promise.resolve();
-                })
-                .catch(() => {
-                    context.commit('setUserInfo', null);
-                    return Promise.reject();
-                });
-        }
+  },
+  actions: {
+    getUserInfo(context) {
+      return http.http
+        .get("/user/my")
+        .then((res) => {
+          context.commit("setUserInfo", res);
+          return Promise.resolve();
+        })
+        .catch(() => {
+          context.commit("setUserInfo", null);
+          return Promise.reject();
+        });
     },
-    modules: {}
+  },
+  modules: {},
 });

src/main/nine-space/src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="about">
-        <h1>This is an about page</h1>
-    </div>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
 </template>

src/main/nine-space/src/views/Creator.vue

@@ -1,16 +1,16 @@
 <template>
-    <div>
-        <creator-info></creator-info>
-        <creator-info></creator-info>
-        <creator-info></creator-info>
-        <creator-info></creator-info>
-    </div>
+  <div>
+    <creator-info></creator-info>
+    <creator-info></creator-info>
+    <creator-info></creator-info>
+    <creator-info></creator-info>
+  </div>
 </template>
 
 <script>
-import CreatorInfo from '../components/creator/CreatorInfo.vue';
+import CreatorInfo from "../components/creator/CreatorInfo.vue";
 export default {
-    components: { CreatorInfo }
+  components: { CreatorInfo },
 };
 </script>
 

src/main/nine-space/src/views/Detail.vue

@@ -1,301 +1,302 @@
 <template>
-    <div class="detail">
-        <swiper pagination class="mySwiper">
-            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-            <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
-        </swiper>
+  <div class="detail">
+    <swiper pagination class="mySwiper">
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+    </swiper>
 
-        <div class="info">
-            <div class="price-line">
-                <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
-                <div class="sub">含 <span>5%</span> 版税</div>
-                <div class="text">
-                    <span>已售 23</span>
-                    <span>剩余 50</span>
-                </div>
-            </div>
-            <div class="title">游戏《百分之一》精美皮肤---恶魔的礼物</div>
-            <div class="info-bottom">
-                <span class="text1"> 编号 338392 </span>
-                <van-button type="primary" plain size="mini">选择其他编号</van-button>
-                <like-button>20</like-button>
-            </div>
+    <div class="info">
+      <div class="price-line">
+        <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
+        <div class="sub">含 <span>5%</span> 版税</div>
+        <div class="text">
+          <span>已售 23</span>
+          <span>剩余 50</span>
         </div>
+      </div>
+      <div class="title">游戏《百分之一》精美皮肤---恶魔的礼物</div>
+      <div class="info-bottom">
+        <span class="text1"> 编号 338392 </span>
+        <van-button type="primary" plain size="mini">选择其他编号</van-button>
+        <like-button>20</like-button>
+      </div>
+    </div>
 
-        <driver />
-        <van-cell value="进入主页" is-link class="creator">
-            <template #icon>
-                <van-image
-                    width="40"
-                    height="40"
-                    src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
-                    fit="cover"
-                    radius="100"
-                />
-            </template>
-            <template #title>
-                <div class="text1">铸造者昵称</div>
-                <div class="text2">铸造者</div>
-            </template>
-        </van-cell>
+    <driver />
+    <van-cell value="进入主页" is-link class="creator">
+      <template #icon>
+        <van-image
+          width="40"
+          height="40"
+          src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+          fit="cover"
+          radius="100"
+        />
+      </template>
+      <template #title>
+        <div class="text1">铸造者昵称</div>
+        <div class="text2">铸造者</div>
+      </template>
+    </van-cell>
 
-        <driver />
+    <driver />
 
-        <div class="goods">
-            <div class="page-title">商品特性</div>
-            <div class="specific-list">
-                <div class="specific-item">
-                    <div class="text1">数字权益卡</div>
-                    <div class="text2">打开可见</div>
-                </div>
-                <div class="specific-item">
-                    <div class="text1">属性</div>
-                    <div class="text2">S级</div>
-                </div>
-                <div class="specific-item">
-                    <div class="text1">限量发售</div>
-                    <div class="text2">100份</div>
-                </div>
-            </div>
-            <div class="page-title">链上信息</div>
-            <div class="page-text">
-                创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
-            </div>
-            <div class="page-title" style="padding-top: 30px">作品描述</div>
-            <div class="page-text">
-                品名：数字权益卡<br />
-                款式：基础版*3+待解锁隐藏款*2<br />
-                尺寸：1080x1920<br />
-                类型：个人创作 <br />
-                创建时间：2021-08-20<br />
-                创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
-            </div>
+    <div class="goods">
+      <div class="page-title">商品特性</div>
+      <div class="specific-list">
+        <div class="specific-item">
+          <div class="text1">数字权益卡</div>
+          <div class="text2">打开可见</div>
+        </div>
+        <div class="specific-item">
+          <div class="text1">属性</div>
+          <div class="text2">S级</div>
+        </div>
+        <div class="specific-item">
+          <div class="text1">限量发售</div>
+          <div class="text2">100份</div>
         </div>
+      </div>
+      <div class="page-title">链上信息</div>
+      <div class="page-text">
+        创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
+      </div>
+      <div class="page-title" style="padding-top: 30px">作品描述</div>
+      <div class="page-text">
+        品名：数字权益卡<br />
+        款式：基础版*3+待解锁隐藏款*2<br />
+        尺寸：1080x1920<br />
+        类型：个人创作 <br />
+        创建时间：2021-08-20<br />
+        创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
+      </div>
+    </div>
 
-        <driver />
+    <driver />
 
-        <van-collapse v-model="activeName" accordion>
-            <van-collapse-item title="交易记录" name="1">
-                <van-cell title="单元格" value="内容"> </van-cell>
-            </van-collapse-item>
-        </van-collapse>
+    <van-collapse v-model="activeName" accordion>
+      <van-collapse-item title="交易记录" name="1">
+        <van-cell title="单元格" value="内容"> </van-cell>
+      </van-collapse-item>
+    </van-collapse>
 
-        <driver />
-    </div>
+    <driver />
+  </div>
 </template>
 
 <script>
-import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Swiper, SwiperSlide } from "swiper/vue";
 
-import 'swiper/swiper.min.css';
-import 'swiper/swiper-bundle.min.css';
+import "swiper/swiper.min.css";
+import "swiper/swiper-bundle.min.css";
 
-import SwiperCore, { Pagination } from 'swiper';
+import SwiperCore, { Pagination } from "swiper";
 
 // install Swiper modules
 SwiperCore.use([Pagination]);
 
 export default {
-    components: {
-        Swiper,
-        SwiperSlide
-    },
-    data() {
-        return {
-            activeName: '1'
-        };
-    }
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  data() {
+    return {
+      activeName: "1",
+    };
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .detail {
-    padding-bottom: 100px;
+  padding-bottom: 100px;
 }
 .info {
-    height: 164px;
-    background-color: @bg;
-    border-radius: 20px 20px 0 0;
-    transform: translateY(-16px);
-    position: relative;
-    z-index: 2;
-    padding: 16px;
-    box-sizing: border-box;
+  height: 164px;
+  background-color: @bg;
+  border-radius: 20px 20px 0 0;
+  transform: translateY(-16px);
+  position: relative;
+  z-index: 2;
+  padding: 16px;
+  box-sizing: border-box;
 
-    .price {
-        font-size: 36px;
-        font-family: OSP;
-        color: #fdfb60;
-        line-height: 36px;
-        transform: translateY(3px);
+  .price {
+    font-size: 36px;
+    font-family: OSP;
+    color: #fdfb60;
+    line-height: 36px;
+    transform: translateY(3px);
 
-        .font_family {
-            font-size: 10px;
-            line-height: 24px;
-            vertical-align: middle;
-        }
+    .font_family {
+      font-size: 10px;
+      line-height: 24px;
+      vertical-align: middle;
     }
+  }
 
-    .price-line {
-        display: flex;
-        align-items: flex-end;
-        .sub {
-            flex-grow: 1;
-            margin-left: 5px;
-            font-size: 14px;
-            color: #949699;
-            line-height: 16px;
-            span {
-                color: #fff;
-            }
-        }
-
-        .text {
-            font-size: 14px;
-            color: #939599;
-            line-height: 16px;
-            span {
-                margin-left: 10px;
-            }
-        }
+  .price-line {
+    display: flex;
+    align-items: flex-end;
+    .sub {
+      flex-grow: 1;
+      margin-left: 5px;
+      font-size: 14px;
+      color: #949699;
+      line-height: 16px;
+      span {
+        color: #fff;
+      }
     }
 
-    .title {
-        font-size: 20px;
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 28px;
-        margin-top: 12px;
+    .text {
+      font-size: 14px;
+      color: #939599;
+      line-height: 16px;
+      span {
+        margin-left: 10px;
+      }
     }
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 28px;
+    margin-top: 12px;
+  }
 
-    .info-bottom {
-        display: flex;
-        position: relative;
-        margin-top: 4px;
-        .text1 {
-            font-size: 14px;
-            color: #949699;
-            line-height: 24px;
-        }
-        .van-button {
-            font-size: 13px;
-            color: #fdfb60;
-            line-height: 24px;
-            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            border-width: 0px;
-            margin-left: 10px;
-        }
+  .info-bottom {
+    display: flex;
+    position: relative;
+    margin-top: 4px;
+    .text1 {
+      font-size: 14px;
+      color: #949699;
+      line-height: 24px;
+    }
+    .van-button {
+      font-size: 13px;
+      color: #fdfb60;
+      line-height: 24px;
+      background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      border-width: 0px;
+      margin-left: 10px;
+    }
 
-        .like {
-            position: absolute;
-            right: 0;
-        }
+    .like {
+      position: absolute;
+      right: 0;
     }
+  }
 }
 
 /deep/.creator {
-    align-items: center;
-    padding: 24px 16px 24px;
-    .van-cell__title {
-        margin-left: 12px;
-        .text1 {
-            font-size: 16px;
-            line-height: 24px;
-        }
-        .text2 {
-            font-size: 12px;
-            color: #939599;
-            line-height: 22px;
-        }
+  align-items: center;
+  padding: 24px 16px 24px;
+  .van-cell__title {
+    margin-left: 12px;
+    .text1 {
+      font-size: 16px;
+      line-height: 24px;
     }
-
-    .van-cell__value {
-        font-size: 13px;
+    .text2 {
+      font-size: 12px;
+      color: #939599;
+      line-height: 22px;
     }
+  }
+
+  .van-cell__value {
+    font-size: 13px;
+  }
 }
 
 /deep/ .mySwiper {
-    width: 100vw;
-    height: 100vw;
-    z-index: 1;
+  width: 100vw;
+  height: 100vw;
+  z-index: 1;
 
-    .swiper-pagination {
-        bottom: 22px;
-    }
+  .swiper-pagination {
+    bottom: 22px;
+  }
 
-    .swiper-pagination-bullet {
-        width: 6px;
-        height: 2px;
-        border-radius: 1px;
-        background: #d7d7d7;
-    }
+  .swiper-pagination-bullet {
+    width: 6px;
+    height: 2px;
+    border-radius: 1px;
+    background: #d7d7d7;
+  }
 
-    .swiper-pagination-bullet-active {
-        background: @prim;
-    }
+  .swiper-pagination-bullet-active {
+    background: @prim;
+  }
 
-    .swiper-slide img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 4px;
-    }
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
+  }
 }
 .goods {
-    padding: 20px 16px;
+  padding: 20px 16px;
 }
 
 .page-title {
-    font-size: 18px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 28px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 28px;
 }
 .specific-list {
-    padding: 16px 0 32px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  padding: 16px 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .specific-item {
-    width: 94px;
-    height: 62px;
-    border-radius: 4px;
-    border: solid 0px transparent;
-    padding: 1px;
-    background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
-    background-origin: border-box;
-    box-sizing: border-box;
-    background-clip: content-box, border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
+  width: 94px;
+  height: 62px;
+  border-radius: 4px;
+  border: solid 0px transparent;
+  padding: 1px;
+  background-image: linear-gradient(@bg, @bg),
+    linear-gradient(135deg, #fdfb60, #ff8f3e);
+  background-origin: border-box;
+  box-sizing: border-box;
+  background-clip: content-box, border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 
-    .text1 {
-        font-size: 14px;
-        color: #939599;
-        line-height: 24px;
-    }
+  .text1 {
+    font-size: 14px;
+    color: #939599;
+    line-height: 24px;
+  }
 
-    .text2 {
-        font-size: 14px;
-        color: #ffffff;
-        line-height: 24px;
-    }
+  .text2 {
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 24px;
+  }
 }
 
 .page-text {
-    font-size: 14px;
-    color: #ffffff;
-    line-height: 28px;
-    margin-top: 10px;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 28px;
+  margin-top: 10px;
 }
 </style>

src/main/nine-space/src/views/Discover.vue

@@ -1,264 +1,289 @@
 <template>
-    <div class="discover">
-        <van-sticky ref="top" @change="change">
-            <div class="top">
-                <div class="top-btn">
-                    <div class="btn" :class="{ active: active === 'explore' }" @click="changeActive('explore')">
-                        收藏探索
-                    </div>
-                    <div class="btn" :class="{ active: active === 'creator' }" @click="changeActive('creator')">
-                        铸造者
-                    </div>
-                </div>
-                <div class="search">
-                    <img src="../assets/svgs/search.svg" alt="" />
-                </div>
-            </div>
+  <div class="discover">
+    <van-sticky ref="top" @change="change">
+      <div class="top">
+        <div class="top-btn">
+          <div
+            class="btn"
+            :class="{ active: active === 'explore' }"
+            @click="changeActive('explore')"
+          >
+            收藏探索
+          </div>
+          <div
+            class="btn"
+            :class="{ active: active === 'creator' }"
+            @click="changeActive('creator')"
+          >
+            铸造者
+          </div>
+        </div>
+        <div class="search">
+          <img src="../assets/svgs/search.svg" alt="" />
+        </div>
+      </div>
 
-            <van-tabs v-if="active === 'creator'" v-model:active="type" line-width="16" line-height="2">
-                <van-tab title="全部"></van-tab>
-                <van-tab title="最新"></van-tab>
-                <van-tab title="人气"></van-tab>
-                <van-tab title="关注"></van-tab>
-            </van-tabs>
-        </van-sticky>
+      <van-tabs
+        v-if="active === 'creator'"
+        v-model:active="type"
+        line-width="16"
+        line-height="2"
+      >
+        <van-tab title="全部"></van-tab>
+        <van-tab title="最新"></van-tab>
+        <van-tab title="人气"></van-tab>
+        <van-tab title="关注"></van-tab>
+      </van-tabs>
+    </van-sticky>
 
-        <template v-if="active === 'explore'">
-            <swiper pagination class="mySwiper">
-                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-                <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-            </swiper>
+    <template v-if="active === 'explore'">
+      <swiper pagination class="mySwiper">
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+      </swiper>
 
-            <van-grid :border="false">
-                <van-grid-item text="精选推荐">
-                    <template v-slot:icon>
-                        <img class="grid-img" src="../assets/svgs/info_icon_jingxuanxilie.svg" />
-                    </template>
-                </van-grid-item>
-                <van-grid-item text="原创系列">
-                    <template v-slot:icon>
-                        <img class="grid-img" src="../assets/svgs/info_icon_yuanchangxilie.svg" />
-                    </template>
-                </van-grid-item>
-                <van-grid-item text="数字盲盒">
-                    <template v-slot:icon>
-                        <img class="grid-img" src="../assets/svgs/info_icon_manghexilie.svg" />
-                    </template>
-                </van-grid-item>
-                <van-grid-item text="拍卖系列">
-                    <template v-slot:icon>
-                        <img class="grid-img" src="../assets/svgs/info_icon_paimaixilie.svg" />
-                    </template>
-                </van-grid-item>
-            </van-grid>
+      <van-grid :border="false">
+        <van-grid-item text="精选推荐">
+          <template v-slot:icon>
+            <img
+              class="grid-img"
+              src="../assets/svgs/info_icon_jingxuanxilie.svg"
+            />
+          </template>
+        </van-grid-item>
+        <van-grid-item text="原创系列">
+          <template v-slot:icon>
+            <img
+              class="grid-img"
+              src="../assets/svgs/info_icon_yuanchangxilie.svg"
+            />
+          </template>
+        </van-grid-item>
+        <van-grid-item text="数字盲盒">
+          <template v-slot:icon>
+            <img
+              class="grid-img"
+              src="../assets/svgs/info_icon_manghexilie.svg"
+            />
+          </template>
+        </van-grid-item>
+        <van-grid-item text="拍卖系列">
+          <template v-slot:icon>
+            <img
+              class="grid-img"
+              src="../assets/svgs/info_icon_paimaixilie.svg"
+            />
+          </template>
+        </van-grid-item>
+      </van-grid>
 
-            <div class="title">本期推荐</div>
-            <div class="box-list">
-                <product-info></product-info>
-                <product-info></product-info>
-                <product-info></product-info>
-                <product-info></product-info>
-                <product-info></product-info>
-                <product-info></product-info>
-            </div>
-        </template>
+      <div class="title">本期推荐</div>
+      <div class="box-list">
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+      </div>
+    </template>
 
-        <creator v-else> </creator>
-    </div>
+    <creator v-else> </creator>
+  </div>
 </template>
 
 <script>
-import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Swiper, SwiperSlide } from "swiper/vue";
 
-import 'swiper/swiper.min.css';
-import 'swiper/swiper-bundle.min.css';
+import "swiper/swiper.min.css";
+import "swiper/swiper-bundle.min.css";
 
-import SwiperCore, { Pagination } from 'swiper';
+import SwiperCore, { Pagination } from "swiper";
 
 // install Swiper modules
 SwiperCore.use([Pagination]);
 
-import ProductInfo from '../components/product/productInfo.vue';
-import Creator from './Creator.vue';
+import ProductInfo from "../components/product/productInfo.vue";
+import Creator from "./Creator.vue";
 
 export default {
-    name: 'discover',
-    inject: ['bs'],
-    components: {
-        Swiper,
-        SwiperSlide,
-        ProductInfo,
-        Creator
-    },
-    data() {
-        return {
-            active: 'explore',
-            stiky: null,
-            type: 0
-        };
-    },
-    beforeUnmount() {
-        if (this.stiky.parentNode.nodeName == 'BODY') {
-            this.$nextTick(() => {
-                document.body.removeChild(this.stiky);
-            });
-        }
-    },
-    mounted() {
+  name: "discover",
+  inject: ["bs"],
+  components: {
+    Swiper,
+    SwiperSlide,
+    ProductInfo,
+    Creator,
+  },
+  data() {
+    return {
+      active: "explore",
+      stiky: null,
+      type: 0,
+    };
+  },
+  beforeUnmount() {
+    if (this.stiky.parentNode.nodeName == "BODY") {
+      this.$nextTick(() => {
+        document.body.removeChild(this.stiky);
+      });
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.stiky = this.$refs.top.$el.childNodes[0];
+    });
+  },
+  methods: {
+    change(isFixed) {
+      if (isFixed) {
         this.$nextTick(() => {
-            this.stiky = this.$refs.top.$el.childNodes[0];
+          document.body.appendChild(this.stiky);
         });
+      } else {
+        this.$refs.top.$el.appendChild(this.stiky);
+      }
     },
-    methods: {
-        change(isFixed) {
-            if (isFixed) {
-                this.$nextTick(() => {
-                    document.body.appendChild(this.stiky);
-                });
-            } else {
-                this.$refs.top.$el.appendChild(this.stiky);
-            }
-        },
-        changeActive(active) {
-            this.active = active;
-            this.$nextTick(() => {
-                this.bs.value.scrollTo(0, 0);
-                this.bs.value.refresh();
-            });
-        }
-    }
+    changeActive(active) {
+      this.active = active;
+      this.$nextTick(() => {
+        this.bs.value.scrollTo(0, 0);
+        this.bs.value.refresh();
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .top {
-    display: flex;
-    padding: 10px 16px;
-    background-color: @bg;
-    .top-btn {
-        flex-grow: 1;
-        .btn {
-            font-size: 16px;
-            font-family: ZhenyanGB;
-            font-weight: 400;
-            line-height: 26px;
-            display: inline-block;
-            vertical-align: text-bottom;
+  display: flex;
+  padding: 10px 16px;
+  background-color: @bg;
+  .top-btn {
+    flex-grow: 1;
+    .btn {
+      font-size: 16px;
+      font-family: ZhenyanGB;
+      font-weight: 400;
+      line-height: 26px;
+      display: inline-block;
+      vertical-align: text-bottom;
 
-            &.active {
-                color: @prim;
-                font-size: 20px;
-                font-weight: bold;
-                line-height: 30px;
-            }
-        }
+      &.active {
+        color: @prim;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 30px;
+      }
+    }
 
-        .btn + .btn {
-            margin-left: 30px;
-        }
+    .btn + .btn {
+      margin-left: 30px;
     }
+  }
 }
 
 .discover {
-    background-color: @bg3;
+  background-color: @bg3;
 }
 
 /deep/ .mySwiper {
-    width: calc(100vw - 32px);
-    height: calc(41vw - 13px);
+  width: calc(100vw - 32px);
+  height: calc(41vw - 13px);
 
-    .swiper-pagination {
-        bottom: 12px;
-    }
+  .swiper-pagination {
+    bottom: 12px;
+  }
 
-    .swiper-pagination-bullet {
-        width: 6px;
-        height: 2px;
-        border-radius: 1px;
-        background: #d7d7d7;
-    }
+  .swiper-pagination-bullet {
+    width: 6px;
+    height: 2px;
+    border-radius: 1px;
+    background: #d7d7d7;
+  }
 
-    .swiper-pagination-bullet-active {
-        background: @prim;
-    }
+  .swiper-pagination-bullet-active {
+    background: @prim;
+  }
 }
 
 .swiper-slide {
-    text-align: center;
-    font-size: 18px;
+  text-align: center;
+  font-size: 18px;
 
-    /* Center slide text vertically */
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
 }
 
 .swiper-slide img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 4px;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
 }
 .grid-img {
-    display: block;
+  display: block;
 }
 .van-grid {
-    margin-top: 12px;
+  margin-top: 12px;
 }
 /deep/ .van-grid-item__content {
-    padding: 14px 20px 16px;
+  padding: 14px 20px 16px;
 }
 /deep/ .van-grid-item__text {
-    color: #fff;
-    font-size: 13px;
-    line-height: 18px;
-    margin-top: 4px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 18px;
+  margin-top: 4px;
 }
 
 .title {
-    padding: 16px 20px 8px;
-    color: @prim;
-    font-size: 18px;
-    font-weight: bold;
+  padding: 16px 20px 8px;
+  color: @prim;
+  font-size: 18px;
+  font-weight: bold;
 }
 
 .box-list {
-    // display: flex;
-    // flex-wrap: wrap;
-    padding: 0 8px;
+  // display: flex;
+  // flex-wrap: wrap;
+  padding: 0 8px;
 }
 
 .discover {
-    padding-bottom: 50px;
+  padding-bottom: 50px;
 }
 
 /deep/.van-tab {
-    color: #fff;
-    flex: 0;
-    padding: 20px;
-    flex-shrink: 0;
-    min-width: 74px;
+  color: #fff;
+  flex: 0;
+  padding: 20px;
+  flex-shrink: 0;
+  min-width: 74px;
 
-    &.van-tab--active {
-        color: @prim;
-    }
+  &.van-tab--active {
+    color: @prim;
+  }
 }
 
 /deep/ .van-tabs__line {
-    bottom: 20px;
+  bottom: 20px;
 }
 </style>

src/main/nine-space/src/views/Home.vue

@@ -1,135 +1,135 @@
 <template>
-    <div class="home">
-        <swiper
-            :effect="'coverflow'"
-            :grabCursor="true"
-            :centeredSlides="true"
-            :slidesPerView="'auto'"
-            :coverflowEffect="{
-                rotate: 0,
-                stretch: 0,
-                depth: -100,
-                modifier: 1,
-                slideShadows: true
-            }"
-            loop
-            class="mySwiper"
-        >
-            <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-            <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-            <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-            <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
-        </swiper>
-
-        <page-title title="最HOT收藏品"></page-title>
-
-        <div class="hot">
-            <product-info></product-info>
-            <div class="hot-right">
-                <product-small></product-small>
-                <product-small></product-small>
-            </div>
-        </div>
-
-        <div class="casting">
-            <page-title title="最受欢迎铸造者"></page-title>
-
-            <creator-info :rank="1"></creator-info>
-            <creator-info :rank="2"></creator-info>
-            <creator-info :rank="3"></creator-info>
-        </div>
-
-        <div class="box">
-            <page-title title="数字盲盒"></page-title>
-            <div class="box-list">
-                <product-info></product-info>
-                <product-info></product-info>
-                <product-info></product-info>
-                <product-info></product-info>
-                <product-info></product-info>
-                <product-info></product-info>
-            </div>
-        </div>
+  <div class="home">
+    <swiper
+      :effect="'coverflow'"
+      :grabCursor="true"
+      :centeredSlides="true"
+      :slidesPerView="'auto'"
+      :coverflowEffect="{
+        rotate: 0,
+        stretch: 0,
+        depth: -100,
+        modifier: 1,
+        slideShadows: true,
+      }"
+      loop
+      class="mySwiper"
+    >
+      <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+    </swiper>
+
+    <page-title title="最HOT收藏品"></page-title>
+
+    <div class="hot">
+      <product-info></product-info>
+      <div class="hot-right">
+        <product-small></product-small>
+        <product-small></product-small>
+      </div>
     </div>
+
+    <div class="casting">
+      <page-title title="最受欢迎铸造者"></page-title>
+
+      <creator-info :rank="1"></creator-info>
+      <creator-info :rank="2"></creator-info>
+      <creator-info :rank="3"></creator-info>
+    </div>
+
+    <div class="box">
+      <page-title title="数字盲盒"></page-title>
+      <div class="box-list">
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 // @ is an alias to /src
 
-import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Swiper, SwiperSlide } from "swiper/vue";
 
 // Import Swiper styles
 
-import 'swiper/swiper.min.css';
-import 'swiper/swiper-bundle.min.css';
+import "swiper/swiper.min.css";
+import "swiper/swiper-bundle.min.css";
 
-import SwiperCore, { EffectCoverflow } from 'swiper';
-import ProductInfo from '../components/product/productInfo.vue';
-import ProductSmall from '../components/product/productSmall.vue';
-import CreatorInfo from '../components/creator/CreatorInfo.vue';
+import SwiperCore, { EffectCoverflow } from "swiper";
+import ProductInfo from "../components/product/productInfo.vue";
+import ProductSmall from "../components/product/productSmall.vue";
+import CreatorInfo from "../components/creator/CreatorInfo.vue";
 
 // install Swiper modules
 SwiperCore.use([EffectCoverflow]);
 
 export default {
-    name: 'Home',
-    inject: ['changeCheck'],
-    components: {
-        Swiper,
-        SwiperSlide,
-        ProductInfo,
-        ProductSmall,
-        CreatorInfo
-    }
+  name: "Home",
+  inject: ["changeCheck"],
+  components: {
+    Swiper,
+    SwiperSlide,
+    ProductInfo,
+    ProductSmall,
+    CreatorInfo,
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .swiper {
-    width: 100%;
-    padding-top: 50px;
-    padding-bottom: 50px;
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }
 
 .swiper-slide {
-    background-position: center;
-    background-size: cover;
+  background-position: center;
+  background-size: cover;
+  width: calc(100vw - 66px);
+  height: calc(45vw - 29px);
+
+  img {
     width: calc(100vw - 66px);
     height: calc(45vw - 29px);
-
-    img {
-        width: calc(100vw - 66px);
-        height: calc(45vw - 29px);
-        display: block;
-    }
+    display: block;
+  }
 }
 
 .swiper-slide img {
-    display: block;
-    width: 100%;
+  display: block;
+  width: 100%;
 }
 .home {
-    padding: 10px 0 100px;
+  padding: 10px 0 100px;
 }
 
 .hot {
-    display: flex;
-    padding: 0 8px;
+  display: flex;
+  padding: 0 8px;
 
-    .hot-right {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
+  .hot-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
 }
 
 .box-list {
-    padding: 0 8px;
-    display: flex;
-    flex-wrap: wrap;
+  padding: 0 8px;
+  display: flex;
+  flex-wrap: wrap;
 
-    .product {
-        margin-bottom: 16px;
-    }
+  .product {
+    margin-bottom: 16px;
+  }
 }
 </style>

src/main/nine-space/src/views/Index.vue

@@ -1,71 +1,83 @@
 <template>
-    <div class="index">
-        <router-view class="container" />
-        <van-tabbar v-model="active" z-index="20" safe-area-inset-bottom route placeholder ref="tabbar">
-            <van-tabbar-item v-for="item in menus" :name="item.name" :to="`/${item.name}`" :key="item.name">
-                <span>{{ item.title }}</span>
-                <template #icon="props">
-                    <img :src="props.active ? item.preIcon : item.icon" />
-                </template>
-            </van-tabbar-item>
-        </van-tabbar>
-    </div>
+  <div class="index">
+    <router-view class="container" />
+    <van-tabbar
+      v-model="active"
+      z-index="20"
+      safe-area-inset-bottom
+      route
+      placeholder
+      ref="tabbar"
+    >
+      <van-tabbar-item
+        v-for="item in menus"
+        :name="item.name"
+        :to="`/${item.name}`"
+        :key="item.name"
+      >
+        <span>{{ item.title }}</span>
+        <template #icon="props">
+          <img :src="props.active ? item.preIcon : item.icon" />
+        </template>
+      </van-tabbar-item>
+    </van-tabbar>
+  </div>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref } from "vue";
 export default {
-    setup() {
-        const menus = [
-            {
-                name: 'home',
-                title: '首页',
-                icon: require('../assets/svgs/tabbar_icon_01.svg'),
-                preIcon: require('../assets/svgs/tabbar_icon_01_pre.svg')
-            },
-            {
-                name: 'discover',
-                title: '发现',
-                icon: require('../assets/svgs/tabbar_icon_02.svg'),
-                preIcon: require('../assets/svgs/tabbar_icon_02_pre.svg')
-            },
-            {
-                name: 'store',
-                title: '柜子',
-                icon: require('../assets/svgs/tabbar_icon_03.svg'),
-                preIcon: require('../assets/svgs/tabbar_icon_03_pre.svg')
-            },
-            {
-                name: 'mine',
-                title: '我的',
-                icon: require('../assets/svgs/tabbar_icon_04.svg'),
-                preIcon: require('../assets/svgs/tabbar_icon_04_pre.svg')
-            }
-        ];
-        const active = ref('home');
-        return { active, menus };
-    },
-    data() {
-        return {
-            menu: null
-        };
-    },
-    mounted() {
-        this.$nextTick(() => {
-            this.menu = this.$refs.tabbar.$el.childNodes[0];
-            document.body.appendChild(this.menu);
-        });
-    },
-    beforeUnmount() {
-        if (this.menu) {
-            document.body.removeChild(this.menu);
-        }
+  setup() {
+    const menus = [
+      {
+        name: "home",
+        title: "首页",
+        icon: require("../assets/svgs/tabbar_icon_01.svg"),
+        preIcon: require("../assets/svgs/tabbar_icon_01_pre.svg"),
+      },
+      {
+        name: "discover",
+        title: "发现",
+        icon: require("../assets/svgs/tabbar_icon_02.svg"),
+        preIcon: require("../assets/svgs/tabbar_icon_02_pre.svg"),
+      },
+      {
+        name: "store",
+        title: "柜子",
+        icon: require("../assets/svgs/tabbar_icon_03.svg"),
+        preIcon: require("../assets/svgs/tabbar_icon_03_pre.svg"),
+      },
+      {
+        name: "mine",
+        title: "我的",
+        icon: require("../assets/svgs/tabbar_icon_04.svg"),
+        preIcon: require("../assets/svgs/tabbar_icon_04_pre.svg"),
+      },
+    ];
+    const active = ref("home");
+    return { active, menus };
+  },
+  data() {
+    return {
+      menu: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.menu = this.$refs.tabbar.$el.childNodes[0];
+      document.body.appendChild(this.menu);
+    });
+  },
+  beforeUnmount() {
+    if (this.menu) {
+      document.body.removeChild(this.menu);
     }
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .container {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 </style>

src/main/nine-space/src/views/Mine.vue

@@ -1,341 +1,384 @@
 <template>
-    <div class="mine">
-        <div class="userInfo" v-if="isLogin">
-            <van-image width="100%" height="35vw" :src="userInfo.bg" fit="cover" class="top-img" />
-            <div class="userInfo-content">
-                <div class="userInfo-top">
-                    <van-image
-                        round
-                        width="78"
-                        height="78"
-                        :src="userInfo.avatar || require('../assets/svgs/img_default_photo.svg')"
-                        fit="cover"
-                        @click="$router.push('/setting')"
-                    />
-                    <div class="text">
-                        <div class="text1 van-ellipsis">{{ userInfo.nickname }}</div>
-                        <div class="text2">
-                            <span>{{ userInfo.id }}</span>
-                            <img @click="copy" src="../assets/svgs/copy_icon.svg" alt="" />
-                        </div>
-                    </div>
-                </div>
-
-                <div class="sub">
-                    {{ userInfo.intro }}
-                </div>
-
-                <div class="btns">
-                    <div class="collect">
-                        <div class="text1">2111</div>
-                        <div class="text2">关注</div>
-                    </div>
-                    <div class="collect">
-                        <div class="text1">2111</div>
-                        <div class="text2">粉丝</div>
-                    </div>
-                    <div class="flex1"></div>
-                    <van-button
-                        plain
-                        color="#fff"
-                        size="mini"
-                        :icon="require('../assets/svgs/person.svg')"
-                        round
-                        @click="$router.push('/verified')"
-                    >
-                        未认证
-                    </van-button>
-                    <van-button plain @click="$router.push('/setting')" color="#fff" size="mini" round
-                        >编辑资料</van-button
-                    >
-                </div>
+  <div class="mine">
+    <div class="userInfo" v-if="isLogin">
+      <van-image
+        width="100%"
+        height="35vw"
+        :src="userInfo.bg"
+        fit="cover"
+        class="top-img"
+      />
+      <div class="userInfo-content">
+        <div class="userInfo-top">
+          <van-image
+            round
+            width="78"
+            height="78"
+            :src="
+              userInfo.avatar || require('../assets/svgs/img_default_photo.svg')
+            "
+            fit="cover"
+            @click="$router.push('/setting')"
+          />
+          <div class="text">
+            <div class="text1 van-ellipsis">{{ userInfo.nickname }}</div>
+            <div class="text2">
+              <span>{{ userInfo.id }}</span>
+              <img @click="copy" src="../assets/svgs/copy_icon.svg" alt="" />
             </div>
+          </div>
         </div>
-        <div class="top" v-else>
-            <van-image
-                round
-                width="78"
-                height="78"
-                :src="require('../assets/svgs/img_default_photo.svg')"
-                fit="cover"
-                @click="$router.push('/login')"
-            />
 
-            <div class="text">
-                <div class="text1" @click="$router.push('/login')">点击登录</div>
-                <div class="text2">立即登录获取精彩服务</div>
-            </div>
+        <div class="sub">
+          {{ userInfo.intro }}
         </div>
-        <van-cell class="title" title="商品订单" :border="false" is-link value="查看全部" />
-        <van-grid :border="false" :gutter="10">
-            <van-grid-item text="全部订单" :border="false">
-                <template v-slot:icon>
-                    <img class="grid-img" src="../assets/svgs/info_icon_dingdan.svg" />
-                </template>
-            </van-grid-item>
-            <van-grid-item text="待支付" :border="false">
-                <template v-slot:icon>
-                    <img class="grid-img" src="../assets/svgs/info_icon_daizhifu.svg" />
-                </template>
-            </van-grid-item>
-            <van-grid-item text="交易中" :border="false">
-                <template v-slot:icon>
-                    <img class="grid-img" src="../assets/svgs/info_icon_dingdan_daishouhuo.svg" />
-                </template>
-            </van-grid-item>
-            <van-grid-item text="已完成" :border="false">
-                <template v-slot:icon>
-                    <img class="grid-img" src="../assets/svgs/info_icon_yiwancheng.svg" />
-                </template>
-            </van-grid-item>
-        </van-grid>
 
-        <van-cell class="title" title="我的服务" :border="false" />
-
-        <van-cell-group :border="false" class="menu">
-            <van-cell title="钱包" is-link>
-                <template #icon>
-                    <van-icon :name="require('../assets/svgs/icon-qiabao.svg')" class="search-icon" />
-                </template>
-            </van-cell>
+        <div class="btns">
+          <div class="collect">
+            <div class="text1">2111</div>
+            <div class="text2">关注</div>
+          </div>
+          <div class="collect">
+            <div class="text1">2111</div>
+            <div class="text2">粉丝</div>
+          </div>
+          <div class="flex1"></div>
+          <van-button
+            plain
+            color="#fff"
+            size="mini"
+            :icon="require('../assets/svgs/person.svg')"
+            round
+            @click="$router.push('/verified')"
+          >
+            未认证
+          </van-button>
+          <van-button
+            plain
+            @click="$router.push('/setting')"
+            color="#fff"
+            size="mini"
+            round
+            >编辑资料</van-button
+          >
+        </div>
+      </div>
+    </div>
+    <div class="top" v-else>
+      <van-image
+        round
+        width="78"
+        height="78"
+        :src="require('../assets/svgs/img_default_photo.svg')"
+        fit="cover"
+        @click="$router.push('/login')"
+      />
 
-            <van-cell title="积分" is-link>
-                <template #icon>
-                    <van-icon :name="require('../assets/svgs/icon-jifen.svg')" class="search-icon" />
-                </template>
-            </van-cell>
-            <van-cell title="我赞过的" is-link>
-                <template #icon>
-                    <van-icon :name="require('../assets/svgs/icon-dianzan.svg')" class="search-icon" />
-                </template>
-            </van-cell>
-            <van-cell title="地址管理" is-link>
-                <template #icon>
-                    <van-icon :name="require('../assets/svgs/icon_dizhi.svg')" class="search-icon" />
-                </template>
-            </van-cell>
-            <van-cell title="了解更多" is-link>
-                <template #icon>
-                    <van-icon :name="require('../assets/svgs/icon_liaojiegengduo.svg')" class="search-icon" />
-                </template>
-            </van-cell>
-            <van-cell title="关于我们" is-link>
-                <template #icon>
-                    <van-icon :name="require('../assets/svgs/icon-guanyuwomen.svg')" class="search-icon" />
-                </template>
-            </van-cell>
-            <van-cell title="账号与安全" is-link>
-                <template #icon>
-                    <van-icon :name="require('../assets/svgs/icon-anquan.svg')" class="search-icon" />
-                </template>
-            </van-cell>
-        </van-cell-group>
+      <div class="text">
+        <div class="text1" @click="$router.push('/login')">点击登录</div>
+        <div class="text2">立即登录获取精彩服务</div>
+      </div>
     </div>
+    <van-cell
+      class="title"
+      title="商品订单"
+      :border="false"
+      is-link
+      value="查看全部"
+    />
+    <van-grid :border="false" :gutter="10">
+      <van-grid-item text="全部订单" :border="false">
+        <template v-slot:icon>
+          <img class="grid-img" src="../assets/svgs/info_icon_dingdan.svg" />
+        </template>
+      </van-grid-item>
+      <van-grid-item text="待支付" :border="false">
+        <template v-slot:icon>
+          <img class="grid-img" src="../assets/svgs/info_icon_daizhifu.svg" />
+        </template>
+      </van-grid-item>
+      <van-grid-item text="交易中" :border="false">
+        <template v-slot:icon>
+          <img
+            class="grid-img"
+            src="../assets/svgs/info_icon_dingdan_daishouhuo.svg"
+          />
+        </template>
+      </van-grid-item>
+      <van-grid-item text="已完成" :border="false">
+        <template v-slot:icon>
+          <img class="grid-img" src="../assets/svgs/info_icon_yiwancheng.svg" />
+        </template>
+      </van-grid-item>
+    </van-grid>
+
+    <van-cell class="title" title="我的服务" :border="false" />
+
+    <van-cell-group :border="false" class="menu">
+      <van-cell title="钱包" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-qiabao.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+
+      <van-cell title="积分" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-jifen.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="我赞过的" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-dianzan.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="地址管理" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon_dizhi.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="了解更多" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon_liaojiegengduo.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="关于我们" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-guanyuwomen.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="账号与安全" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-anquan.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 export default {
-    computed: {
-        ...mapState(['userInfo'])
-    },
-    methods: {
-        copy() {
-            this.$copyText(this.userInfo.id).then(
-                e => {
-                    this.$toast.success('复制成功');
-                    console.log(e);
-                },
-                e => {
-                    this.$toast('复制失败');
-                    console.log(e);
-                }
-            );
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  methods: {
+    copy() {
+      this.$copyText(this.userInfo.id).then(
+        (e) => {
+          this.$toast.success("复制成功");
+          console.log(e);
+        },
+        (e) => {
+          this.$toast("复制失败");
+          console.log(e);
         }
-    }
+      );
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .mine {
-    padding-bottom: 98px;
-    background-color: @bg2;
+  padding-bottom: 98px;
+  background-color: @bg2;
 }
 .top {
-    display: flex;
-    align-items: center;
-    padding: 26px 16px 30px;
-    border-bottom: 5px solid @bg3;
+  display: flex;
+  align-items: center;
+  padding: 26px 16px 30px;
+  border-bottom: 5px solid @bg3;
 
-    .text {
-        margin-left: 12px;
+  .text {
+    margin-left: 12px;
 
-        .text1 {
-            font-size: 24px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 34px;
-        }
+    .text1 {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 34px;
+    }
 
-        .text2 {
-            font-size: 16px;
-            color: #949699;
-            line-height: 24px;
-            margin-top: 6px;
-        }
+    .text2 {
+      font-size: 16px;
+      color: #949699;
+      line-height: 24px;
+      margin-top: 6px;
     }
+  }
 }
 
 /deep/ .title {
-    padding: 20px 16px 10px;
-    .van-cell__title {
-        span {
-            font-size: 20px;
-            font-weight: bold;
-            line-height: 28px;
-        }
+  padding: 20px 16px 10px;
+  .van-cell__title {
+    span {
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 28px;
     }
+  }
 
-    .van-cell__value {
-        span {
-            font-size: 13px;
-            line-height: 28px;
-        }
+  .van-cell__value {
+    span {
+      font-size: 13px;
+      line-height: 28px;
     }
+  }
 
-    .van-icon {
-        line-height: 28px;
-    }
+  .van-icon {
+    line-height: 28px;
+  }
 }
 
 .grid-img {
-    display: block;
+  display: block;
 }
 
 /deep/ .van-grid-item {
-    .van-grid-item__text {
-        font-size: 13px;
-        color: #ffffff;
-        line-height: 18px;
-        margin-top: 4px;
-    }
+  .van-grid-item__text {
+    font-size: 13px;
+    color: #ffffff;
+    line-height: 18px;
+    margin-top: 4px;
+  }
 }
 
 /deep/.menu {
-    .van-cell {
-        padding: 22px 20px 24px;
+  .van-cell {
+    padding: 22px 20px 24px;
 
-        &::after {
-            left: 52px;
-            right: 16px;
-        }
+    &::after {
+      left: 52px;
+      right: 16px;
     }
+  }
 
-    .van-cell__title {
-        span {
-            font-weight: bold;
-        }
+  .van-cell__title {
+    span {
+      font-weight: bold;
     }
+  }
 }
 
 .search-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  /deep/.van-icon__image {
     width: 24px;
     height: 24px;
-    margin-right: 10px;
-    /deep/.van-icon__image {
-        width: 24px;
-        height: 24px;
-        display: block;
-    }
+    display: block;
+  }
 }
 .userInfo {
-    padding-top: 35vw;
-    border-bottom: 5px solid @bg3;
-    position: relative;
+  padding-top: 35vw;
+  border-bottom: 5px solid @bg3;
+  position: relative;
 
-    .top-img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 1;
-    }
+  .top-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
 }
 .userInfo-content {
-    padding: 0 16px;
-    z-index: 2;
-    position: relative;
-    transform: translateY(-8px);
-    .sub {
+  padding: 0 16px;
+  z-index: 2;
+  position: relative;
+  transform: translateY(-8px);
+  .sub {
+    font-size: 14px;
+    color: #939599;
+    line-height: 22px;
+    padding: 16px 0;
+  }
+
+  .btns {
+    display: flex;
+    // padding-bottom: 16px;
+    align-items: center;
+    .collect {
+      width: 20%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .text1 {
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 24px;
+      }
+      .text2 {
         font-size: 14px;
         color: #939599;
-        line-height: 22px;
-        padding: 16px 0;
+        line-height: 24px;
+      }
     }
 
-    .btns {
-        display: flex;
-        // padding-bottom: 16px;
-        align-items: center;
-        .collect {
-            width: 20%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            .text1 {
-                font-size: 16px;
-                color: #ffffff;
-                line-height: 24px;
-            }
-            .text2 {
-                font-size: 14px;
-                color: #939599;
-                line-height: 24px;
-            }
-        }
-
-        /deep/.van-button {
-            width: 90px;
-            .van-icon__image {
-                display: block;
-                width: 18px;
-                height: 18px;
-            }
-        }
-        .van-button + .van-button {
-            margin-left: 10px;
-        }
+    /deep/.van-button {
+      width: 90px;
+      .van-icon__image {
+        display: block;
+        width: 18px;
+        height: 18px;
+      }
     }
+    .van-button + .van-button {
+      margin-left: 10px;
+    }
+  }
 }
 .userInfo-top {
-    display: flex;
-    align-items: center;
-    .van-image {
-        border: 5px solid #fff;
-        flex-shrink: 0;
-    }
+  display: flex;
+  align-items: center;
+  .van-image {
+    border: 5px solid #fff;
+    flex-shrink: 0;
+  }
 
-    .text {
-        margin: 0 40px 0 12px;
-        overflow: hidden;
-        .text1 {
-            font-size: 24px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 34px;
-        }
-        .text2 {
-            font-size: 16px;
-            color: #949699;
-            line-height: 24px;
-            display: flex;
-            align-items: center;
-            margin-top: 6px;
-            img {
-                display: block;
-                margin-left: 6px;
-            }
-        }
+  .text {
+    margin: 0 40px 0 12px;
+    overflow: hidden;
+    .text1 {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 34px;
+    }
+    .text2 {
+      font-size: 16px;
+      color: #949699;
+      line-height: 24px;
+      display: flex;
+      align-items: center;
+      margin-top: 6px;
+      img {
+        display: block;
+        margin-left: 6px;
+      }
     }
+  }
 }
 </style>

src/main/nine-space/src/views/Store.vue

@@ -1,209 +1,217 @@
 <template>
-    <div class="discover">
-        <van-sticky ref="top" @change="change">
-            <div class="top">
-                <div class="top-btn">
-                    <div class="btn" :class="{ active: active === 'explore' }" @click="changeActive('explore')">
-                        我拥有的
-                    </div>
-                    <div class="btn" :class="{ active: active === 'creator' }" @click="changeActive('creator')">
-                        我卖出的
-                    </div>
-                </div>
-                <div class="search">
-                    <img src="../assets/svgs/search.svg" alt="" />
-                </div>
-            </div>
-
-            <van-tabs v-model:active="type" line-width="16" line-height="2">
-                <van-tab title="全部"></van-tab>
-                <van-tab title="售卖"></van-tab>
-                <van-tab title="仅展示"></van-tab>
-                <van-tab title="综合排序"></van-tab>
-            </van-tabs>
-        </van-sticky>
-
-        <div class="box-list">
-            <product-info></product-info>
-            <product-info></product-info>
-            <product-info></product-info>
-            <product-info></product-info>
-            <product-info></product-info>
-            <product-info></product-info>
+  <div class="discover">
+    <van-sticky ref="top" @change="change">
+      <div class="top">
+        <div class="top-btn">
+          <div
+            class="btn"
+            :class="{ active: active === 'explore' }"
+            @click="changeActive('explore')"
+          >
+            我拥有的
+          </div>
+          <div
+            class="btn"
+            :class="{ active: active === 'creator' }"
+            @click="changeActive('creator')"
+          >
+            我卖出的
+          </div>
         </div>
+        <div class="search">
+          <img src="../assets/svgs/search.svg" alt="" />
+        </div>
+      </div>
+
+      <van-tabs v-model:active="type" line-width="16" line-height="2">
+        <van-tab title="全部"></van-tab>
+        <van-tab title="售卖"></van-tab>
+        <van-tab title="仅展示"></van-tab>
+        <van-tab title="综合排序"></van-tab>
+      </van-tabs>
+    </van-sticky>
+
+    <div class="box-list">
+      <product-info></product-info>
+      <product-info></product-info>
+      <product-info></product-info>
+      <product-info></product-info>
+      <product-info></product-info>
+      <product-info></product-info>
     </div>
+  </div>
 </template>
 
 <script>
-import ProductInfo from '../components/product/productInfo.vue';
+import ProductInfo from "../components/product/productInfo.vue";
 
 export default {
-    name: 'discover',
-    inject: ['bs'],
-    components: {
-        ProductInfo
-    },
-    data() {
-        return {
-            active: 'explore',
-            stiky: null,
-            type: 0
-        };
-    },
-    mounted() {
+  name: "discover",
+  inject: ["bs"],
+  components: {
+    ProductInfo,
+  },
+  data() {
+    return {
+      active: "explore",
+      stiky: null,
+      type: 0,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.stiky = this.$refs.top.$el.childNodes[0];
+    });
+  },
+  beforeUnmount() {
+    if (this.stiky.parentNode.nodeName == "BODY") {
+      this.$nextTick(() => {
+        document.body.removeChild(this.stiky);
+      });
+    }
+  },
+  methods: {
+    change(isFixed) {
+      if (isFixed) {
         this.$nextTick(() => {
-            this.stiky = this.$refs.top.$el.childNodes[0];
+          document.body.appendChild(this.stiky);
         });
+      } else {
+        this.$refs.top.$el.appendChild(this.stiky);
+      }
     },
-    beforeUnmount() {
-        if (this.stiky.parentNode.nodeName == 'BODY') {
-            this.$nextTick(() => {
-                document.body.removeChild(this.stiky);
-            });
-        }
+    changeActive(active) {
+      this.active = active;
+      this.$nextTick(() => {
+        this.bs.value.scrollTo(0, 0);
+        this.bs.value.refresh();
+      });
     },
-    methods: {
-        change(isFixed) {
-            if (isFixed) {
-                this.$nextTick(() => {
-                    document.body.appendChild(this.stiky);
-                });
-            } else {
-                this.$refs.top.$el.appendChild(this.stiky);
-            }
-        },
-        changeActive(active) {
-            this.active = active;
-            this.$nextTick(() => {
-                this.bs.value.scrollTo(0, 0);
-                this.bs.value.refresh();
-            });
-        }
-    }
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .top {
-    display: flex;
-    padding: 10px 16px;
-    background-color: @bg;
-    .top-btn {
-        flex-grow: 1;
-        .btn {
-            font-size: 16px;
-            font-family: ZhenyanGB;
-            font-weight: 400;
-            line-height: 26px;
-            display: inline-block;
-            vertical-align: text-bottom;
-
-            &.active {
-                color: @prim;
-                font-size: 20px;
-                font-weight: bold;
-                line-height: 30px;
-            }
-        }
-
-        .btn + .btn {
-            margin-left: 30px;
-        }
+  display: flex;
+  padding: 10px 16px;
+  background-color: @bg;
+  .top-btn {
+    flex-grow: 1;
+    .btn {
+      font-size: 16px;
+      font-family: ZhenyanGB;
+      font-weight: 400;
+      line-height: 26px;
+      display: inline-block;
+      vertical-align: text-bottom;
+
+      &.active {
+        color: @prim;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 30px;
+      }
+    }
+
+    .btn + .btn {
+      margin-left: 30px;
     }
+  }
 }
 
 .discover {
-    background-color: @bg3;
+  background-color: @bg3;
 }
 
 /deep/ .mySwiper {
-    width: calc(100vw - 32px);
-    height: calc(41vw - 13px);
-
-    .swiper-pagination {
-        bottom: 12px;
-    }
-
-    .swiper-pagination-bullet {
-        width: 6px;
-        height: 2px;
-        border-radius: 1px;
-        background: #d7d7d7;
-    }
-
-    .swiper-pagination-bullet-active {
-        background: @prim;
-    }
+  width: calc(100vw - 32px);
+  height: calc(41vw - 13px);
+
+  .swiper-pagination {
+    bottom: 12px;
+  }
+
+  .swiper-pagination-bullet {
+    width: 6px;
+    height: 2px;
+    border-radius: 1px;
+    background: #d7d7d7;
+  }
+
+  .swiper-pagination-bullet-active {
+    background: @prim;
+  }
 }
 
 .swiper-slide {
-    text-align: center;
-    font-size: 18px;
-
-    /* Center slide text vertically */
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
+  text-align: center;
+  font-size: 18px;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
 }
 
 .swiper-slide img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 4px;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
 }
 .grid-img {
-    display: block;
+  display: block;
 }
 .van-grid {
-    margin-top: 12px;
+  margin-top: 12px;
 }
 /deep/ .van-grid-item__content {
-    padding: 14px 20px 16px;
+  padding: 14px 20px 16px;
 }
 /deep/ .van-grid-item__text {
-    color: #fff;
-    font-size: 13px;
-    line-height: 18px;
-    margin-top: 4px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 18px;
+  margin-top: 4px;
 }
 
 .title {
-    padding: 16px 20px 8px;
-    color: @prim;
-    font-size: 18px;
-    font-weight: bold;
+  padding: 16px 20px 8px;
+  color: @prim;
+  font-size: 18px;
+  font-weight: bold;
 }
 
 .box-list {
-    // display: flex;
-    // flex-wrap: wrap;
-    padding: 0 8px;
+  // display: flex;
+  // flex-wrap: wrap;
+  padding: 0 8px;
 }
 
 .discover {
-    padding-bottom: 50px;
+  padding-bottom: 50px;
 }
 
 /deep/.van-tab {
-    color: #fff;
+  color: #fff;
 
-    &.van-tab--active {
-        color: @prim;
-    }
+  &.van-tab--active {
+    color: @prim;
+  }
 }
 
 /deep/ .van-tabs__line {
-    bottom: 20px;
+  bottom: 20px;
 }
 </style>

src/main/nine-space/src/views/user/ChangeText.vue

@@ -1,64 +1,66 @@
 <template>
-    <div class="change">
-        <div class="title">{{ type === 'nickname' ? '昵称' : '简介' }}</div>
-        <van-field
-            v-model="message"
-            :rows="type === 'nickname' ? 1 : 4"
-            type="textarea"
-            :maxlength="type === 'nickname' ? 10 : 50"
-            :placeholder="type === 'nickname' ? '请输入昵称' : '请添加介绍，让大家了解你'"
-            :show-word-limit="type !== 'nickname'"
-            clearable
-        />
-        <div class="btn">
-            <van-button
-                type="primary"
-                block
-                round
-                :disabled="!message"
-                color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-                @click="save"
-                >保存</van-button
-            >
-        </div>
+  <div class="change">
+    <div class="title">{{ type === "nickname" ? "昵称" : "简介" }}</div>
+    <van-field
+      v-model="message"
+      :rows="type === 'nickname' ? 1 : 4"
+      type="textarea"
+      :maxlength="type === 'nickname' ? 10 : 50"
+      :placeholder="
+        type === 'nickname' ? '请输入昵称' : '请添加介绍，让大家了解你'
+      "
+      :show-word-limit="type !== 'nickname'"
+      clearable
+    />
+    <div class="btn">
+      <van-button
+        type="primary"
+        block
+        round
+        :disabled="!message"
+        color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+        @click="save"
+        >保存</van-button
+      >
     </div>
+  </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 export default {
-    computed: {
-        ...mapState(['userInfo'])
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  data() {
+    return {
+      type: "nickname",
+      message: "",
+    };
+  },
+  mounted() {
+    this.type = this.$route.query.type;
+    this.message = this.userInfo[this.type];
+  },
+  methods: {
+    save() {
+      if (this.message) {
+        this.updateUser({ [this.type]: this.message }).then(() => {
+          setTimeout(() => {
+            this.$router.back();
+          }, 1500);
+        });
+      }
     },
-    data() {
-        return {
-            type: 'nickname',
-            message: ''
-        };
-    },
-    mounted() {
-        this.type = this.$route.query.type;
-        this.message = this.userInfo[this.type];
-    },
-    methods: {
-        save() {
-            if (this.message) {
-                this.updateUser({ [this.type]: this.message }).then(() => {
-                    setTimeout(() => {
-                        this.$router.back();
-                    }, 1500);
-                });
-            }
-        }
-    }
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .title {
-    padding: 23px 16px;
+  padding: 23px 16px;
 }
 .btn {
-    padding: 100px 50px;
+  padding: 100px 50px;
 }
 </style>

src/main/nine-space/src/views/user/Forget.vue

@@ -1,165 +1,184 @@
 <template>
-    <div class="login">
-        <div class="tabs">
-            <div class="tab active">设置新密码</div>
-        </div>
-
-        <van-form @submit="submit">
-            <van-field
-                type="tel"
-                name="用户名"
-                placeholder="请输入用户名"
-                v-model="form.phone"
-                :maxlength="11"
-                :rules="[{ required: true, message: '请填写用户名' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                </template>
-            </van-field>
-
-            <van-field
-                type="digit"
-                name="验证码"
-                placeholder="请输入验证码"
-                v-model="form.code"
-                :maxlength="4"
-                :rules="[{ required: true, message: '请输入验证码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_code.svg')" class="icon" />
-                </template>
-                <template #button>
-                    <van-button class="sub-code" size="small" plain type="primary">发送验证码</van-button>
-                </template>
-            </van-field>
-
-            <van-field
-                type="password"
-                name="密码"
-                placeholder="请输入密码"
-                v-model="form.password"
-                :rules="[{ required: true, message: '请填写密码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
-                </template>
-            </van-field>
-
-            <van-field
-                type="password"
-                name="密码"
-                placeholder="请再次输入密码"
-                v-model="form.password2"
-                :rules="[{ required: true, message: '请再次填写密码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
-                </template>
-            </van-field>
-
-            <div class="button">
-                <van-button
-                    round
-                    block
-                    native-type="submit"
-                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-                    class="sure"
-                    >找回密码</van-button
-                >
-                <van-button class="del" round block plain @click="$router.replace('/login')"
-                    >想起密码，立即登陆</van-button
-                >
-            </div>
-        </van-form>
+  <div class="login">
+    <div class="tabs">
+      <div class="tab active">设置新密码</div>
     </div>
+
+    <van-form @submit="submit">
+      <van-field
+        type="tel"
+        name="用户名"
+        placeholder="请输入用户名"
+        v-model="form.phone"
+        :maxlength="11"
+        :rules="[{ required: true, message: '请填写用户名' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_zhanghao.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <van-field
+        type="digit"
+        name="验证码"
+        placeholder="请输入验证码"
+        v-model="form.code"
+        :maxlength="4"
+        :rules="[{ required: true, message: '请输入验证码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_code.svg')"
+            class="icon"
+          />
+        </template>
+        <template #button>
+          <van-button class="sub-code" size="small" plain type="primary"
+            >发送验证码</van-button
+          >
+        </template>
+      </van-field>
+
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请输入密码"
+        v-model="form.password"
+        :rules="[{ required: true, message: '请填写密码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请再次输入密码"
+        v-model="form.password2"
+        :rules="[{ required: true, message: '请再次填写密码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <div class="button">
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+          >找回密码</van-button
+        >
+        <van-button
+          class="del"
+          round
+          block
+          plain
+          @click="$router.replace('/login')"
+          >想起密码，立即登陆</van-button
+        >
+      </div>
+    </van-form>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            active: 'phone',
-            form: {
-                phone: '',
-                password: '',
-                password2: '',
-                code: ''
-            }
-        };
+  data() {
+    return {
+      active: "phone",
+      form: {
+        phone: "",
+        password: "",
+        password2: "",
+        code: "",
+      },
+    };
+  },
+  methods: {
+    submit() {
+      console.log("63772");
     },
-    methods: {
-        submit() {
-            console.log('63772');
-        }
-    }
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .login {
-    padding: 40px 50px 100px;
+  padding: 40px 50px 100px;
 }
 
 .tabs {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .tab {
-        font-size: 18px;
-        color: #c8c9cc;
-        line-height: 25px;
-
-        &.active {
-            font-size: 24px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 33px;
-        }
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tab {
+    font-size: 18px;
+    color: #c8c9cc;
+    line-height: 25px;
+
+    &.active {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 33px;
     }
+  }
 }
 
 .icon {
-    display: block;
-    margin-top: 12px;
+  display: block;
+  margin-top: 12px;
 }
 /deep/ .van-form {
-    margin-top: 28px;
-    .van-cell {
-        padding: 0px 0;
+  margin-top: 28px;
+  .van-cell {
+    padding: 0px 0;
 
-        .van-field__left-icon {
-            margin-right: 8px;
-        }
+    .van-field__left-icon {
+      margin-right: 8px;
     }
+  }
 
-    .van-cell + .van-cell {
-        margin-top: 20px;
-    }
-    .van-field__body {
-        height: 44px;
-        align-items: center;
-    }
+  .van-cell + .van-cell {
+    margin-top: 20px;
+  }
+  .van-field__body {
+    height: 44px;
+    align-items: center;
+  }
 }
 .button {
-    margin-top: 60px;
+  margin-top: 60px;
 
-    .del {
-        margin-top: 20px;
-        border-color: #ffffff;
-    }
+  .del {
+    margin-top: 20px;
+    border-color: #ffffff;
+  }
 
-    .sure {
-        color: @bg !important;
-    }
+  .sure {
+    color: @bg !important;
+  }
 
-    .van-button {
-        font-weight: bold;
-    }
+  .van-button {
+    font-weight: bold;
+  }
 }
 
 .sub-code {
-    padding-right: 0;
-    border-width: 0;
+  padding-right: 0;
+  border-width: 0;
 }
 </style>

src/main/nine-space/src/views/user/Login.vue

@@ -1,213 +1,241 @@
 <template>
-    <div class="login">
-        <div class="tabs">
-            <div class="tab" :class="{ active: active === 'phone' }" @click="active = 'phone'">账号密码登陆</div>
-            <div class="tab" :class="{ active: active === 'code' }" @click="active = 'code'">验证码登陆</div>
-        </div>
+  <div class="login">
+    <div class="tabs">
+      <div
+        class="tab"
+        :class="{ active: active === 'phone' }"
+        @click="active = 'phone'"
+      >
+        账号密码登陆
+      </div>
+      <div
+        class="tab"
+        :class="{ active: active === 'code' }"
+        @click="active = 'code'"
+      >
+        验证码登陆
+      </div>
+    </div>
 
-        <van-form @submit="submit" ref="form">
-            <van-field
-                type="tel"
-                name="用户名"
-                placeholder="请输入手机号码"
-                v-model="form.phone"
-                :rules="[
-                    { required: true, message: '请输入手机号码' },
-                    {
-                        pattern: phonePattern,
-                        message: '手机号码格式错误'
-                    }
-                ]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                </template>
-            </van-field>
-            <van-field
-                type="password"
-                name="密码"
-                placeholder="请输入密码"
-                v-model="form.password"
-                :rules="[{ required: true, message: '请填写密码' }]"
-                v-if="active === 'phone'"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
-                </template>
-            </van-field>
+    <van-form @submit="submit" ref="form">
+      <van-field
+        type="tel"
+        name="用户名"
+        placeholder="请输入手机号码"
+        v-model="form.phone"
+        :rules="[
+          { required: true, message: '请输入手机号码' },
+          {
+            pattern: phonePattern,
+            message: '手机号码格式错误',
+          },
+        ]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_zhanghao.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请输入密码"
+        v-model="form.password"
+        :rules="[{ required: true, message: '请填写密码' }]"
+        v-if="active === 'phone'"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
 
-            <van-field
-                type="code"
-                name="验证码"
-                placeholder="请输入验证码"
-                v-model="form.code"
-                v-else
-                :rules="[{ required: true, message: '请输入验证码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_code.svg')" class="icon" />
-                </template>
-                <template #button>
-                    <van-button
-                        class="sub-code"
-                        size="small"
-                        plain
-                        type="primary"
-                        @click="sendPhone"
-                        :disabled="isSend"
-                    >
-                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-                    </van-button>
-                </template>
-            </van-field>
-            <div class="button">
-                <van-button plain class="forget" @click="$router.replace('/forget')"> 忘记密码？ </van-button>
+      <van-field
+        type="code"
+        name="验证码"
+        placeholder="请输入验证码"
+        v-model="form.code"
+        v-else
+        :rules="[{ required: true, message: '请输入验证码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_code.svg')"
+            class="icon"
+          />
+        </template>
+        <template #button>
+          <van-button
+            class="sub-code"
+            size="small"
+            plain
+            type="primary"
+            @click="sendPhone"
+            :disabled="isSend"
+          >
+            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
+          </van-button>
+        </template>
+      </van-field>
+      <div class="button">
+        <van-button plain class="forget" @click="$router.replace('/forget')">
+          忘记密码？
+        </van-button>
 
-                <van-button
-                    round
-                    block
-                    native-type="submit"
-                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-                    class="sure"
-                    >登录</van-button
-                >
-                <van-button class="del" round block plain @click="$router.replace('/register')"
-                    >暂无账号，立即注册</van-button
-                >
-            </div>
-        </van-form>
-    </div>
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+          >登录</van-button
+        >
+        <van-button
+          class="del"
+          round
+          block
+          plain
+          @click="$router.replace('/register')"
+          >暂无账号，立即注册</van-button
+        >
+      </div>
+    </van-form>
+  </div>
 </template>
 
 <script>
-import phone from '../../mixins/phone';
+import phone from "../../mixins/phone";
 export default {
-    mixins: [phone],
-    data() {
-        return {
-            active: 'phone',
-            form: {
-                phone: '',
-                password: '',
-                code: ''
-            }
-        };
+  mixins: [phone],
+  data() {
+    return {
+      active: "phone",
+      form: {
+        phone: "",
+        password: "",
+        code: "",
+      },
+    };
+  },
+  methods: {
+    sendPhone() {
+      this.$refs.form.validate("手机号码").then(() => {
+        this.sendMsg(this.form.phone);
+      });
+    },
+    submit() {
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
+      this.check().then(() => {
+        this.$toast.success("登录成功");
+        setTimeout(() => {
+          this.$router.back();
+        }, 1500);
+      });
     },
-    methods: {
-        sendPhone() {
-            this.$refs.form.validate('手机号码').then(() => {
-                this.sendMsg(this.form.phone);
-            });
-        },
-        submit() {
-            this.$toast.loading({
-                message: '加载中...',
-                forbidClick: true
-            });
-            this.check().then(() => {
-                this.$toast.success('登录成功');
-                setTimeout(() => {
-                    this.$router.back();
-                }, 1500);
-            });
-        },
-        check() {
-            if (this.active === 'phone') {
-                return this.loginByPhone(this.form.phone, this.form.password);
-            } else {
-                return this.$http
-                    .post('/auth/phoneLogin', {
-                        phone: this.form.phone,
-                        code: this.form.code
-                    })
-                    .catch(e => {
-                        if (e) {
-                            this.$toast(e.error);
-                        }
-                        return Promise.reject();
-                    })
-                    .then(res => {
-                        localStorage.setItem('nineToken', res);
-                        return this.$store.dispatch('getUserInfo');
-                    });
+    check() {
+      if (this.active === "phone") {
+        return this.loginByPhone(this.form.phone, this.form.password);
+      } else {
+        return this.$http
+          .post("/auth/phoneLogin", {
+            phone: this.form.phone,
+            code: this.form.code,
+          })
+          .catch((e) => {
+            if (e) {
+              this.$toast(e.error);
             }
-        }
-    }
+            return Promise.reject();
+          })
+          .then((res) => {
+            localStorage.setItem("nineToken", res);
+            return this.$store.dispatch("getUserInfo");
+          });
+      }
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .login {
-    padding: 40px 50px 100px;
+  padding: 40px 50px 100px;
 }
 
 .tabs {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .tab {
-        font-size: 18px;
-        color: #c8c9cc;
-        line-height: 25px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tab {
+    font-size: 18px;
+    color: #c8c9cc;
+    line-height: 25px;
 
-        &.active {
-            font-size: 24px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 33px;
-        }
+    &.active {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 33px;
     }
+  }
 }
 
 .icon {
-    display: block;
-    margin-top: 12px;
+  display: block;
+  margin-top: 12px;
 }
 /deep/ .van-form {
-    margin-top: 28px;
-    .van-cell {
-        padding: 0px 0;
+  margin-top: 28px;
+  .van-cell {
+    padding: 0px 0;
 
-        .van-field__left-icon {
-            margin-right: 8px;
-        }
+    .van-field__left-icon {
+      margin-right: 8px;
     }
+  }
 
-    .van-cell + .van-cell {
-        margin-top: 20px;
-    }
-    .van-field__body {
-        height: 44px;
-        align-items: center;
-    }
+  .van-cell + .van-cell {
+    margin-top: 20px;
+  }
+  .van-field__body {
+    height: 44px;
+    align-items: center;
+  }
 }
 .button {
-    margin-top: 60px;
-    position: relative;
+  margin-top: 60px;
+  position: relative;
 
-    .del {
-        margin-top: 20px;
-        border-color: #ffffff;
-    }
+  .del {
+    margin-top: 20px;
+    border-color: #ffffff;
+  }
 
-    .sure {
-        color: @bg !important;
-    }
+  .sure {
+    color: @bg !important;
+  }
 
-    .van-button {
-        font-weight: bold;
-    }
+  .van-button {
+    font-weight: bold;
+  }
 }
 
 .sub-code {
-    padding-right: 0;
-    border-width: 0;
+  padding-right: 0;
+  border-width: 0;
 }
 
 .forget {
-    position: absolute;
-    font-weight: normal !important;
-    right: 0;
-    top: -65px;
+  position: absolute;
+  font-weight: normal !important;
+  right: 0;
+  top: -65px;
 }
 </style>

src/main/nine-space/src/views/user/Register.vue

@@ -1,222 +1,242 @@
 <template>
-    <div class="login">
-        <div class="tabs">
-            <div class="tab active">用户注册</div>
-        </div>
-
-        <van-form @submit="submit" ref="form">
-            <van-field
-                type="tel"
-                name="手机号码"
-                placeholder="请输入手机号码"
-                v-model="form.phone"
-                :maxlength="11"
-                :rules="[
-                    { required: true, message: '请输入手机号码' },
-                    {
-                        pattern: phonePattern,
-                        message: '手机号码格式错误'
-                    }
-                ]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                </template>
-            </van-field>
-
-            <van-field
-                type="digit"
-                name="验证码"
-                placeholder="请输入验证码"
-                v-model="form.code"
-                :maxlength="4"
-                :rules="[{ required: true, message: '请输入验证码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_code.svg')" class="icon" />
-                </template>
-                <template #button>
-                    <van-button
-                        @click="sendPhone"
-                        class="sub-code"
-                        size="small"
-                        plain
-                        :disabled="isSend"
-                        type="primary"
-                    >
-                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-                    </van-button>
-                </template>
-            </van-field>
-
-            <van-field
-                type="password"
-                name="密码"
-                placeholder="请输入密码"
-                v-model="form.password"
-                :rules="[{ required: true, message: '请填写密码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
-                </template>
-            </van-field>
-
-            <van-field
-                type="password"
-                name="密码"
-                placeholder="请再次输入密码"
-                v-model="form.password2"
-                :rules="[
-                    { required: true, message: '请再次填写密码' },
-                    {
-                        validator: val => {
-                            if (val == form.password) {
-                                return true;
-                            } else {
-                                return false;
-                            }
-                        },
-                        message: '两次密码输入不一致'
-                    }
-                ]"
-            >
-                <template #left-icon>
-                    <img :src="require('../../assets/svgs/login_icon_mima.svg')" class="icon" />
-                </template>
-            </van-field>
-
-            <div class="button">
-                <van-button
-                    round
-                    block
-                    native-type="submit"
-                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
-                    class="sure"
-                    >登录</van-button
-                >
-                <van-button class="del" round block plain @click="$router.replace('/login')"
-                    >已有账号，立即登陆</van-button
-                >
-            </div>
-        </van-form>
+  <div class="login">
+    <div class="tabs">
+      <div class="tab active">用户注册</div>
     </div>
+
+    <van-form @submit="submit" ref="form">
+      <van-field
+        type="tel"
+        name="手机号码"
+        placeholder="请输入手机号码"
+        v-model="form.phone"
+        :maxlength="11"
+        :rules="[
+          { required: true, message: '请输入手机号码' },
+          {
+            pattern: phonePattern,
+            message: '手机号码格式错误',
+          },
+        ]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_zhanghao.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <van-field
+        type="digit"
+        name="验证码"
+        placeholder="请输入验证码"
+        v-model="form.code"
+        :maxlength="4"
+        :rules="[{ required: true, message: '请输入验证码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_code.svg')"
+            class="icon"
+          />
+        </template>
+        <template #button>
+          <van-button
+            @click="sendPhone"
+            class="sub-code"
+            size="small"
+            plain
+            :disabled="isSend"
+            type="primary"
+          >
+            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
+          </van-button>
+        </template>
+      </van-field>
+
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请输入密码"
+        v-model="form.password"
+        :rules="[{ required: true, message: '请填写密码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请再次输入密码"
+        v-model="form.password2"
+        :rules="[
+          { required: true, message: '请再次填写密码' },
+          {
+            validator: (val) => {
+              if (val == form.password) {
+                return true;
+              } else {
+                return false;
+              }
+            },
+            message: '两次密码输入不一致',
+          },
+        ]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <div class="button">
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+          >登录</van-button
+        >
+        <van-button
+          class="del"
+          round
+          block
+          plain
+          @click="$router.replace('/login')"
+          >已有账号，立即登陆</van-button
+        >
+      </div>
+    </van-form>
+  </div>
 </template>
 
 <script>
-import phone from '../../mixins/phone';
+import phone from "../../mixins/phone";
 export default {
-    mixins: [phone],
-    data() {
-        return {
-            active: 'phone',
-            form: {
-                phone: '',
-                password: '',
-                password2: '',
-                code: ''
-            }
-        };
+  mixins: [phone],
+  data() {
+    return {
+      active: "phone",
+      form: {
+        phone: "",
+        password: "",
+        password2: "",
+        code: "",
+      },
+    };
+  },
+  methods: {
+    sendPhone() {
+      this.$refs.form.validate("手机号码").then(() => {
+        this.sendMsg(this.form.phone);
+      });
     },
-    methods: {
-        sendPhone() {
-            this.$refs.form.validate('手机号码').then(() => {
-                this.sendMsg(this.form.phone);
-            });
-        },
-        submit() {
-            this.$toast.loading({
-                message: '加载中...',
-                forbidClick: true
-            });
-            this.verifyMsg(this.form.phone, this.form.code)
-                .then(() => {
-                    return this.$http.post(
-                        '/auth/phoneRegister?phone=' + this.form.phone + '&password=' + this.form.password
-                    );
-                })
-                .then(() => {
-                    return this.loginByPhone(this.form.phone, this.form.password);
-                })
-                .then(() => {
-                    this.$toast.success('注册成功');
-                    setTimeout(() => {
-                        this.$router.back();
-                    }, 1500);
-                })
-                .catch(e => {
-                    if (e) {
-                        this.$toast(e.error);
-                    }
-                });
-        }
-    }
+    submit() {
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
+      this.verifyMsg(this.form.phone, this.form.code)
+        .then(() => {
+          return this.$http.post(
+            "/auth/phoneRegister?phone=" +
+              this.form.phone +
+              "&password=" +
+              this.form.password
+          );
+        })
+        .then(() => {
+          return this.loginByPhone(this.form.phone, this.form.password);
+        })
+        .then(() => {
+          this.$toast.success("注册成功");
+          setTimeout(() => {
+            this.$router.back();
+          }, 1500);
+        })
+        .catch((e) => {
+          if (e) {
+            this.$toast(e.error);
+          }
+        });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .login {
-    padding: 40px 50px 100px;
+  padding: 40px 50px 100px;
 }
 
 .tabs {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .tab {
-        font-size: 18px;
-        color: #c8c9cc;
-        line-height: 25px;
-
-        &.active {
-            font-size: 24px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 33px;
-        }
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tab {
+    font-size: 18px;
+    color: #c8c9cc;
+    line-height: 25px;
+
+    &.active {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 33px;
     }
+  }
 }
 
 .icon {
-    display: block;
-    margin-top: 12px;
+  display: block;
+  margin-top: 12px;
 }
 /deep/ .van-form {
-    margin-top: 28px;
-    .van-cell {
-        padding: 0px 0;
+  margin-top: 28px;
+  .van-cell {
+    padding: 0px 0;
 
-        .van-field__left-icon {
-            margin-right: 8px;
-        }
+    .van-field__left-icon {
+      margin-right: 8px;
     }
+  }
 
-    .van-cell + .van-cell {
-        margin-top: 20px;
-    }
-    .van-field__body {
-        height: 44px;
-        align-items: center;
-    }
+  .van-cell + .van-cell {
+    margin-top: 20px;
+  }
+  .van-field__body {
+    height: 44px;
+    align-items: center;
+  }
 }
 .button {
-    margin-top: 60px;
+  margin-top: 60px;
 
-    .del {
-        margin-top: 20px;
-        border-color: #ffffff;
-    }
+  .del {
+    margin-top: 20px;
+    border-color: #ffffff;
+  }
 
-    .sure {
-        color: @bg !important;
-    }
+  .sure {
+    color: @bg !important;
+  }
 
-    .van-button {
-        font-weight: bold;
-    }
+  .van-button {
+    font-weight: bold;
+  }
 }
 
 .sub-code {
-    padding-right: 0;
-    border-width: 0;
+  padding-right: 0;
+  border-width: 0;
 }
 </style>

src/main/nine-space/src/views/user/Setting.vue

@@ -1,159 +1,162 @@
 <template>
-    <div class="setting">
-        <div class="tabs">编辑资料</div>
+  <div class="setting">
+    <div class="tabs">编辑资料</div>
 
-        <van-cell-group>
-            <van-cell title="头像" is-link>
-                <template #value>
-                    <van-image
-                        round
-                        width="36"
-                        height="36"
-                        :src="userInfo.avatar || require('../../assets/svgs/img_default_photo.svg')"
-                        fit="cover"
-                    />
+    <van-cell-group>
+      <van-cell title="头像" is-link>
+        <template #value>
+          <van-image
+            round
+            width="36"
+            height="36"
+            :src="
+              userInfo.avatar ||
+              require('../../assets/svgs/img_default_photo.svg')
+            "
+            fit="cover"
+          />
 
-                    <van-uploader class="avatar" :after-read="afterRead" />
-                </template>
-            </van-cell>
-            <van-cell
-                title="昵称"
-                @click="$router.push('/changeText?type=nickname')"
-                is-link
-                :value="userInfo.nickname"
-            />
-            <van-cell
-                title="性别"
-                :class="{ not: !userInfo.sex }"
-                is-link
-                :value="userInfo.sex || '未设置'"
-                @click="show = true"
-            />
-            <van-cell
-                title="简介"
-                :class="[userInfo.intro ? 'intro' : 'not']"
-                @click="$router.push('/changeText?type=intro')"
-                is-link
-                :value="userInfo.intro || '请添加介绍'"
-            />
-            <van-cell title="主页背景" class="not" is-link>
-                <template #value>
-                    <span> 更换背景图片</span>
-                    <van-uploader class="avatar" :after-read="afterRead2" />
-                </template>
-            </van-cell>
-            <van-cell class="not" title="编码" :value="userInfo.id" />
-        </van-cell-group>
+          <van-uploader class="avatar" :after-read="afterRead" />
+        </template>
+      </van-cell>
+      <van-cell
+        title="昵称"
+        @click="$router.push('/changeText?type=nickname')"
+        is-link
+        :value="userInfo.nickname"
+      />
+      <van-cell
+        title="性别"
+        :class="{ not: !userInfo.sex }"
+        is-link
+        :value="userInfo.sex || '未设置'"
+        @click="show = true"
+      />
+      <van-cell
+        title="简介"
+        :class="[userInfo.intro ? 'intro' : 'not']"
+        @click="$router.push('/changeText?type=intro')"
+        is-link
+        :value="userInfo.intro || '请添加介绍'"
+      />
+      <van-cell title="主页背景" class="not" is-link>
+        <template #value>
+          <span> 更换背景图片</span>
+          <van-uploader class="avatar" :after-read="afterRead2" />
+        </template>
+      </van-cell>
+      <van-cell class="not" title="编码" :value="userInfo.id" />
+    </van-cell-group>
 
-        <van-action-sheet
-            v-model:show="show"
-            :actions="actions"
-            cancel-text="取消"
-            close-on-click-action
-            @select="chooseSex"
-        />
-    </div>
+    <van-action-sheet
+      v-model:show="show"
+      :actions="actions"
+      cancel-text="取消"
+      close-on-click-action
+      @select="chooseSex"
+    />
+  </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import { ref } from 'vue';
+import { mapState } from "vuex";
+import { ref } from "vue";
 export default {
-    computed: {
-        ...mapState(['userInfo'])
-    },
-    setup() {
-        //性别
-        const show = ref(false);
-        const actions = [{ name: '男' }, { name: '女' }];
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  setup() {
+    //性别
+    const show = ref(false);
+    const actions = [{ name: "男" }, { name: "女" }];
 
-        return {
-            show,
-            actions
-        };
+    return {
+      show,
+      actions,
+    };
+  },
+  methods: {
+    chooseSex(val) {
+      this.updateUser({ sex: val.name });
     },
-    methods: {
-        chooseSex(val) {
-            this.updateUser({ sex: val.name });
-        },
-        afterRead(e) {
-            this.updateFile(e).then(img => {
-                this.updateUser({ avatar: img });
-            });
-        },
-        afterRead2(e) {
-            this.updateFile(e).then(img => {
-                this.updateUser({ bg: img });
-            });
-        }
-    }
+    afterRead(e) {
+      this.updateFile(e).then((img) => {
+        this.updateUser({ avatar: img });
+      });
+    },
+    afterRead2(e) {
+      this.updateFile(e).then((img) => {
+        this.updateUser({ bg: img });
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .setting {
-    padding: 10px 0 100px;
+  padding: 10px 0 100px;
 }
 
 .tabs {
-    font-size: 20px;
-    font-weight: bold;
-    color: #ffffff;
-    line-height: 30px;
-    padding: 0 16px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 30px;
+  padding: 0 16px;
 }
 
 .avatar {
-    position: absolute;
-    right: 0;
-    top: 0;
-    opacity: 0;
-    bottom: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  opacity: 0;
+  bottom: 0;
 }
 
 /deep/ .van-cell {
-    align-items: center;
-    height: 70px;
-    position: relative;
-    .van-cell__title {
-        span {
-            font-weight: bold;
-            font-size: 14px;
-        }
+  align-items: center;
+  height: 70px;
+  position: relative;
+  .van-cell__title {
+    span {
+      font-weight: bold;
+      font-size: 14px;
     }
+  }
 
-    .van-cell__value {
-        span {
-            font-size: 16px;
-            color: #ffffff;
-            line-height: 24px;
-        }
+  .van-cell__value {
+    span {
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 24px;
     }
+  }
 
-    &.not {
-        .van-cell__value {
-            span {
-                font-size: 13px;
-                color: #939599;
-                line-height: 24px;
-            }
-        }
+  &.not {
+    .van-cell__value {
+      span {
+        font-size: 13px;
+        color: #939599;
+        line-height: 24px;
+      }
     }
+  }
 
-    &.intro {
+  &.intro {
+    overflow: hidden;
+    .van-cell__value {
+      span {
+        font-size: 13px;
+        color: #fff;
+        line-height: 24px;
+        display: -webkit-box;
         overflow: hidden;
-        .van-cell__value {
-            span {
-                font-size: 13px;
-                color: #fff;
-                line-height: 24px;
-                display: -webkit-box;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-            }
-        }
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
     }
+  }
 }
 </style>

src/main/nine-space/src/views/user/Waiting.vue

@@ -1,3 +1,3 @@
 <template>
-    <div></div>
+  <div></div>
 </template>

src/main/nine-space/vue.config.js

@@ -1,21 +1,28 @@
-const path = require('path');
+const path = require("path");
 module.exports = {
-    publicPath: process.env.NODE_ENV === 'production' ? '/9th/' : '/',
-    devServer: {
-        port: 8081,
-        disableHostCheck: true
+  publicPath: process.env.NODE_ENV === "production" ? "/9th/" : "/",
+  devServer: {
+    port: 8081,
+    disableHostCheck: true,
+  },
+  pluginOptions: {
+    "style-resources-loader": {
+      preProcessor: "less",
+      patterns: [path.resolve(__dirname, "./src/styles/common/*.less")],
     },
-    pluginOptions: {
-        'style-resources-loader': {
-            preProcessor: 'less',
-            patterns: [path.resolve(__dirname, './src/styles/common/*.less')]
-        }
-    },
-    chainWebpack: config => {
-        if (process.env.NODE_ENV === 'development') {
-            config.output.filename('[name].[hash].js').end();
-        }
-    },
-    transpileDependencies: ['element-ui', 'swiper', 'ssr-window', 'dom7', 'vue-awesome-swiper', 'vuex'],
-    runtimeCompiler: true
+  },
+  chainWebpack: (config) => {
+    if (process.env.NODE_ENV === "development") {
+      config.output.filename("[name].[hash].js").end();
+    }
+  },
+  transpileDependencies: [
+    "element-ui",
+    "swiper",
+    "ssr-window",
+    "dom7",
+    "vue-awesome-swiper",
+    "vuex",
+  ],
+  runtimeCompiler: true,
 };