add

.editorconfig

+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+*.7z
+*.zip
+*.rar
+package-lock.json
\ No newline at end of file

README.en.md

+# chifengweb2.0
+
+#### Description
+{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

README.md

+# chifeng
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install --registry=https://registry.npmmirror.com
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
+
+## Special Directories
+
+You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
+
+### `assets`
+
+The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
+
+### `components`
+
+The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
+
+### `layouts`
+
+Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
+
+
+### `pages`
+
+This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
+
+### `plugins`
+
+The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
+
+### `static`
+
+This directory contains your static files. Each file inside this directory is mapped to `/`.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
+
+### `store`
+
+This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).

components/BackToTopButton.vue

+<template>
+  <div class="back-to-top" @click="scrollToTop" v-show="showButton">
+    <i class="el-icon-position"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showButton: false,
+    };
+  },
+  methods: {
+    scrollToTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    },
+    handleScroll() {
+      if (window.scrollY > 300) {
+        // 修改这个值以定义何时显示按钮
+        this.showButton = true;
+      } else {
+        this.showButton = false;
+      }
+    },
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.handleScroll);
+  },
+};
+</script>
+
+<style scoped>
+.back-to-top {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  z-index: 999;
+  background-color: #fff;
+  color: #999;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  font-size: 30px;
+  border-radius: 50%;
+  text-align: center;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease-in-out;
+}
+.back-to-top i {
+  transform: rotate(-45deg);
+}
+.back-to-top:hover {
+  color: #1961c5;
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
+}
+</style>

components/Carousel.vue

+<template>
+  <div class="carousel">
+    <div
+      class="slides"
+      :style="{ transform: `translateX(-${currentSlide * 100}%)` }"
+    >
+      <div class="slide" v-for="(item, index) in items" :key="index">
+        <div v-if="item.type === 'image'" class="image-slide">
+          <img :src="item.src" alt="Image" :style="imageStyle" />
+        </div>
+        <div v-else-if="item.type === 'video'" class="video-slide">
+          <video controls :src="item.src" class="controls"></video>
+        </div>
+      </div>
+    </div>
+    <div class="controls">
+      <button @click="prevSlideAndRestartTimer">上一张</button>
+      <button @click="nextSlideAndRestartTimer">下一张</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    interval: {
+      type: Number,
+      default: 5000, // 默认轮播时间为5秒
+    },
+  },
+  data() {
+    return {
+      currentSlide: 0,
+      imageScale: 1.0,
+      autoPlayInterval: null, // 保存定时器的引用
+    };
+  },
+  computed: {
+    imageStyle() {
+      return {
+        transform: `scale(${this.imageScale})`,
+        transition: "transform 5s linear",
+      };
+    },
+  },
+  methods: {
+    prevSlideAndRestartTimer() {
+      this.prevSlide();
+      this.restartTimer();
+    },
+    nextSlideAndRestartTimer() {
+      this.nextSlide();
+      this.restartTimer();
+    },
+    prevSlide() {
+      this.currentSlide =
+        (this.currentSlide - 1 + this.items.length) % this.items.length;
+      this.imageScale = 1.05;
+      setTimeout(() => {
+        this.imageScale = 1.0;
+      }, 5 * 1000); // 5秒后恢复到正常大小
+    },
+    nextSlide() {
+      this.currentSlide = (this.currentSlide + 1) % this.items.length;
+      this.imageScale = 1.05;
+      setTimeout(() => {
+        this.imageScale = 1.0;
+      }, 5 * 1000); // 5秒后恢复到正常大小
+    },
+    startAutoPlay() {
+      this.autoPlayInterval = setInterval(this.nextSlide, this.interval);
+    },
+    stopAutoPlay() {
+      clearInterval(this.autoPlayInterval);
+    },
+    restartTimer() {
+      this.stopAutoPlay();
+      this.startAutoPlay();
+    },
+  },
+  created() {
+    this.startAutoPlay();
+  },
+};
+</script>
+
+<style scoped>
+.carousel {
+  position: relative;
+  width: 100%;
+  height: 40vh;
+  overflow: hidden;
+}
+
+.slides {
+  display: flex;
+  transition: transform 0.5s ease;
+}
+
+.slide {
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.image-slide img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.video-slide video {
+  width: 100%;
+}
+
+.controls {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+button {
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 0 5px;
+  cursor: pointer;
+}
+
+.image-slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  transition: transform 5s linear;
+}
+/* 所有控件 */
+.controls::-webkit-media-controls-enclosure {
+  display: none;
+}
+@media (min-width: 769px) {
+}
+@media (min-width: 993px) {
+  .carousel {
+    position: relative;
+    width: 100%;
+    height: 900px;
+    overflow: hidden;
+  }
+}
+@media (min-width: 1200px) {
+}
+@media (min-width: 1799px) {
+}
+</style>

components/CarouselIndex.vue

+<template>
+  <div class="carousel-Index">
+    <el-carousel class="Index-carousel" height="155px">
+      <el-carousel-item v-for="(group, index) in dividedArr" :key="index">
+        <div class="compre"> 
+          <div
+            v-for="item in group"
+            :key="item.id"
+            @click="goToCon(item.id)"
+            
+          >
+            <img :src="`${baseApi}${item.chkqCaPic}`" alt="" srcset="" />
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import { generateCarouselItems } from "~/utils/tyler";
+export default {
+  props: {
+    arr: Array, // 父级传递的tabs数据
+  },
+  data() {
+    return {
+      itemsPerGroup: 2,
+      baseApi: process.env.VUE_APP_File_VIEW,
+    };
+  },
+  computed: {
+    dividedArr() {
+      return generateCarouselItems(this.arr, this.itemsPerGroup);
+    },
+  },
+  methods: {
+    goToCon(id) {
+      this.$router.push({ path: `/Index?id=${id}` });
+    },
+    arrowClick(val) {
+      if (val === "right") {
+        this.$refs.cardShow.next();
+      } else {
+        this.$refs.cardShow.prev();
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.compre {
+  display: flex;
+  justify-content: space-between;
+  width: 98%;
+  margin: 0 auto;
+  >div{
+    cursor: pointer;
+    width: 49%;
+    img{
+      width: 100%;
+      height: 155px;
+      object-fit: fill;
+    }
+  }
+}
+</style>

components/ChiFeng/Gis/index---.vue

+<template>
+  <div>
+    <div
+      v-for="(zone, index) in mapMarksData"
+      :key="index"
+      @click="toggleSelection(index)"
+      :class="{ selected: zone.status }"
+    >
+      {{ getDictLabelFromVal(mineralList, zone.miningZoneType)
+      }}{{ zone.status }}
+    </div>
+    <div v-for="zone in selectedZones" :key="zone.miningZoneType">
+      <div
+        v-for="(item, itemIndex) in getUniqueMiningTypes(zone.items)"
+        :key="itemIndex"
+        @click="toggleItemSelection(zone.miningZoneType, item)"
+        :class="{ selected: isSelectedItem(zone.miningZoneType, item) }"
+      >
+        {{ item.miningTypes }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import sendRequest from "~/utils/request.js";
+import { getDictLabelFromVal } from "~/utils/tyler";
+export default {
+  // props: {
+  //   mapMarksData: {
+  //     type: Array,
+  //     required: true,
+  //   },
+  // },
+  data() {
+    return {
+      selectedZones: [],
+      selectedItems: {},
+      mineralList: [],
+      mapMarksData: [
+        {
+          miningZoneType: "2",
+          status: true,
+          items: [
+            {
+              id: 30,
+              websiteMiningLatitude: "42.280095",
+              websiteMiningLongitude: "118.711606",
+              websiteMiningTitle: "家营子镇",
+              // icon: "aaa.png",
+              miningTypes: 2,
+              picUrl:
+                "/profile/upload/2023/11/04/3a52f3da-1fb1-46d7-97d8-959e8bf9a500.png",
+              status: true,
+            },
+            {
+              id: 30,
+              websiteMiningLatitude: "43.280095",
+              websiteMiningLongitude: "118.711606",
+              websiteMiningTitle: "家营子镇",
+              miningTypes: 5,
+              picUrl:
+                "/profile/upload/2023/11/04/cf9ad0b8-6e6d-4c6c-b377-4d17b45c3cf6.png",
+              status: true,
+            },
+          ],
+        },
+        {
+          miningZoneType: "5",
+          status: true,
+          items: [
+            {
+              id: 30,
+              websiteMiningLatitude: "42.280095",
+              websiteMiningLongitude: "118.711606",
+              websiteMiningTitle: "家营子镇",
+              // icon: "aaa.png",
+              miningTypes: 2,
+              picUrl:
+                "/profile/upload/2023/11/04/3a52f3da-1fb1-46d7-97d8-959e8bf9a500.png",
+              status: true,
+            },
+            {
+              id: 30,
+              websiteMiningLatitude: "43.280095",
+              websiteMiningLongitude: "118.711606",
+              websiteMiningTitle: "家营子镇",
+              miningTypes: 5,
+              picUrl:
+                "/profile/upload/2023/11/04/cf9ad0b8-6e6d-4c6c-b377-4d17b45c3cf6.png",
+              status: true,
+            },
+          ],
+        },
+        {
+          miningZoneType: "3",
+          status: true,
+          items: [
+            {
+              id: 30,
+              websiteMiningLatitude: "43.280095",
+              websiteMiningLongitude: "118.811606",
+              websiteMiningTitle: "家营子镇",
+              // icon: "aaa.png",
+              miningTypes: 3,
+              picUrl:
+                "/profile/upload/2023/11/04/c593d0f5-550e-417d-89cf-745173dcedd8.png",
+              status: true,
+            },
+            {
+              id: 30,
+              websiteMiningLatitude: "43.280095",
+              websiteMiningLongitude: "118.711606",
+              websiteMiningTitle: "家营子镇",
+              miningTypes: 5,
+              picUrl:
+                "/profile/upload/2023/11/04/cf9ad0b8-6e6d-4c6c-b377-4d17b45c3cf6.png",
+              status: true,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  created() {
+    this.getDictData();
+  },
+  methods: {
+    getDictLabelFromVal,
+    toggleSelection(index) {
+      this.$set(this.selectedZones, index, {
+        ...this.mapMarksData[index],
+        status: !this.mapMarksData[index].status,
+      });
+      console.log(this.mapMarksData, "this.mapMarksData");
+    },
+    toggleItemSelection(zoneType, item) {
+      const key = `${zoneType}_${item.miningTypes}`;
+      this.$set(this.selectedItems, key, !this.selectedItems[key]);
+    },
+    isSelectedItem(zoneType, item) {
+      const key = `${zoneType}_${item.miningTypes}`;
+      return this.selectedItems[key] || false;
+    },
+    getUniqueMiningTypes(items) {
+      const uniqueMiningTypes = new Set();
+      return items.filter((item) => {
+        const miningType = item.miningTypes;
+        if (!uniqueMiningTypes.has(miningType)) {
+          uniqueMiningTypes.add(miningType);
+          return true;
+        }
+        return false;
+      });
+    },
+    async getDictData() {
+      const dicMmineral = await sendRequest("/system/dict/data/list", "get", {
+        dictType: "cfkq_mineral_species",
+      });
+      this.mineralList = dicMmineral.rows.map((item) => {
+        return {
+          dictLabel: item.dictLabel,
+          dictValue: item.dictValue,
+        };
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.selected {
+  background-color: lightblue;
+  /* Add your styling for selected items here */
+}
+</style>

components/ChiFeng/right1.vue

+<template>
+  <div class="right1">
+    <div class="pic"></div>
+    <div class="con">
+      <p v-for="(con, index) in cont" :key="index">
+        {{ con }}
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+import sendRequest from "~/utils/request.js";
+import { splitStringByRule } from "~/utils/tyler";
+splitStringByRule;
+export default {
+  data() {
+    return {
+      // baseApi: process.env.VUE_APP_File_VIEW,
+      baseApi: process.env.VUE_APP_File_VIEW,
+      conPic: null,
+      cont: [],
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getData();
+    });
+  },
+  methods: {
+    splitStringByRule,
+    async getData() {
+      // const map = await sendRequest("/business/mineralType/website", "get");
+      // console.log(map, "map");
+      const endowmentData = await sendRequest(
+        "/business/endowmentSituation/list",
+        "get"
+      );
+      const conData = endowmentData.rows[0];
+      this.conPic = conData.esFile;
+      this.cont = this.splitStringByRule("\n", conData.esContent);
+      // console.log(this.cont, "endowmentData");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.right1 {
+  width: 100%;
+  height: 100%;
+
+  display: grid;
+}
+.right1 p {
+  font-size: 22px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #666666;
+  line-height: 40px;
+  text-indent: 2em;
+  text-align: justify;
+}
+.con {
+  height: 100%;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+@media (min-width: 769px) {
+}
+@media (min-width: 993px) {
+  .right1 {
+    background: none;
+  }
+  .right1 p {
+    font-size: 22px;
+    line-height: 40px;
+  }
+}
+@media (min-width: 1200px) {
+  .right1 {
+    background: url(~/static/images/ChiFeng/investor_notice1.png) no-repeat
+      center;
+    background-size: 90%;
+    grid-template-columns: 1.5fr 1fr;
+  }
+  .con {
+    height: 80%;
+    margin-top: 25%;
+  }
+  .right1 p {
+    font-size: 20px;
+    line-height: 36px;
+  }
+}
+@media (min-width: 1799px) {
+  .right1 {
+    grid-template-columns: 1.5fr 1fr;
+  }
+  .con {
+    height: 80%;
+    margin-top: 20%;
+  }
+  .right1 p {
+    font-size: 22px;
+    line-height: 40px;
+  }
+}
+</style>
\ No newline at end of file

components/ChiFeng/right2.vue

+<template>
+  <div class="right2">
+    <div class="con">
+      <p v-for="(con, index) in cont" :key="index">
+        {{ con }}
+      </p>
+    </div>
+    <div class="min-carousel">
+      <el-carousel class="min-res-carousel" height="580px">
+        <el-carousel-item v-for="(group, index) in conData" :key="index">
+          <div class="min-res-con">
+            <div v-for="item in group" :key="item.id" class="min-res-items">
+              <div class="scaleImg">
+                <div class="bg-img">
+                  <img :src="`${baseApi}${item.mrImage}`" alt="" />
+                </div>
+              </div>
+              <div class="com-con">
+                <div class="com-name">{{ item.mrTitle }}</div>
+              </div>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+<script>
+import sendRequest from "~/utils/request.js";
+import { splitStringByRule, generateCarouselItems } from "~/utils/tyler";
+export default {
+  data() {
+    return {
+      baseApi: process.env.VUE_APP_File_VIEW,
+      conPic: null,
+      cont: [],
+      conData: [],
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getData();
+    });
+  },
+  methods: {
+    splitStringByRule,
+    generateCarouselItems,
+    async getData() {
+      const cont = await sendRequest(
+        "/business/mineralResources/content",
+        "get"
+      );
+      if (cont.code === 200) {
+        this.cont = this.splitStringByRule("\n", cont.data.content);
+
+        console.log(this.cont);
+      }
+      const endowmentData = await sendRequest(
+        "/business/mineralResources/list",
+        "get"
+      );
+      this.conData = generateCarouselItems(endowmentData.rows, 4);
+      console.log(this.conData, "this.conData");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.right2 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.min-carousel {
+  width: 100%;
+}
+.min-res-items {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+}
+.min-res-carousel {
+  width: 100%;
+}
+.min-res-con {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .min-res-items {
+    position: relative;
+    width: calc(50% - 5px);
+    height: 280px;
+    // display: flex;
+    // flex-wrap: wrap;
+    &:nth-child(2n-1) {
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+    .scaleImg {
+      width: 100%;
+      height: 100%;
+    }
+    .com-con {
+      position: absolute;
+      height: 52px;
+      background: rgb(25, 97, 197, 0.6);
+      left: 0;
+      bottom: 0;
+      right: 0;
+      z-index: 2;
+      font-size: 17px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 52px;
+      padding-left: 40px;
+    }
+  }
+}
+@media (min-width: 769px) {
+}
+@media (min-width: 993px) {
+  .con p {
+    font-size: 23px;
+
+    color: #666666;
+    line-height: 38px;
+    text-indent: 2em;
+    text-align: justify;
+  }
+}
+@media (min-width: 1200px) {
+}
+@media (min-width: 1799px) {
+}
+</style>
\ No newline at end of file

components/CompanyCarousel.vue

+<template>
+  <div class="carousel-company">
+    <el-carousel class="company-carousel">
+      <el-carousel-item v-for="(group, index) in dividedArr" :key="index">
+        <div class="company-con">
+          <div v-for="item in group" :key="item.id" class="company-items">
+            <div class="scaleImg">
+              <div class="bg-img">
+                <img :src="`${baseApi}${item.pic}`" alt="" />
+              </div>
+            </div>
+            <div class="com-con">
+              <div class="com-name">{{ item.name }}</div>
+              <div class="com-info" v-html="item.dis"></div>
+              <el-button @click="toComp(item.id)" type="text"
+                ><i class="el-icon-position"></i>查看详情{{
+                  item.chkqCompanyId
+                }}</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import { generateCarouselItems } from "~/utils/tyler";
+export default {
+  props: {
+    arr: Array, // 父级传递的tabs数据
+  },
+  data() {
+    return {
+      baseApi: process.env.VUE_APP_File_VIEW,
+      itemsPerGroup: 2,
+    };
+  },
+  computed: {
+    dividedArr() {
+      return generateCarouselItems(this.arr, this.itemsPerGroup);
+    },
+  },
+  methods: {
+    toComp(id) {
+      this.$router.push({ path: `/Company?id=${id}` });
+    },
+    arrowClick(val) {
+      if (val === "right") {
+        this.$refs.cardShow.next();
+      } else {
+        this.$refs.cardShow.prev();
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.company-con {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  margin-top: 0.4rem;
+}
+.carousel-company ::v-deep .el-carousel__container {
+  width: 100%;
+  height: 6.3rem;
+  position: relative;
+}
+::v-deep .el-carousel__button {
+  background-color: #1961c5;
+  height: 0.06rem;
+  width: 0.54rem;
+}
+::v-deep .el-button--text {
+  font-size: 0.18rem;
+  float: right;
+  color: #1961c5;
+  font-weight: bold;
+}
+.company-con {
+}
+.company-con .company-items {
+  flex-direction: column;
+  width: 40%;
+  background-color: #fff;
+}
+
+.company-items .scaleImg {
+  width: 100%;
+  height: 3rem;
+}
+.company-items div.com-name {
+  font-size: 0.2rem;
+  color: #1961c5;
+  width: 50%;
+  float: left;
+  padding: 10px 0;
+}
+.company-items div.com-info {
+  clear: both;
+  font-size: 0.2rem;
+  color: #666;
+  height: 1.4rem;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: justify;
+}
+.company-items div.com-info > p {
+  text-indent: 2em !important;
+}
+.leftArrow {
+  position: absolute;
+  top: 50%;
+  left: 145px;
+  z-index: 200;
+  cursor: pointer;
+  width: 70px;
+  height: 70px;
+}
+.rightArrow {
+  position: absolute;
+  top: 50%;
+  right: 245px;
+  z-index: 200;
+  width: 70px;
+  height: 70px;
+  cursor: pointer;
+}
+@media (min-width: 769px) {
+}
+@media (min-width: 993px) {
+  .carousel-company ::v-deep .el-carousel__container {
+    width: 100%;
+    height: 810px !important;
+  }
+  .carousel-company ::v-deep .el-carousel__arrow {
+    width: 80px;
+    height: 80px;
+    font-size: 40px;
+  }
+  .company-con {
+    margin-top: 50px;
+    flex-direction: column;
+  }
+  .company-con .company-items {
+    width: 100%;
+    flex-direction: row;
+  }
+  .company-items {
+    height: 340px;
+    display: flex;
+    justify-content: space-between;
+    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
+    transition: all 0.5s ease-in-out;
+    margin-bottom: 40px;
+  }
+  .company-items:hover {
+    box-shadow: 2px 3px 6px 2px rgba(0, 0, 0, 0.2);
+  }
+  .company-items:hover img {
+    transform: scale(1.05);
+  }
+  .company-items .scaleImg {
+    width: 40%;
+    height: 100%;
+  }
+  .com-info {
+    display: block;
+  }
+  .com-con {
+    width: 55%;
+    padding: 50px 40px 0;
+  }
+  .company-items div.com-name {
+    width: 100%;
+    font-size: 28px;
+    margin-bottom: 10px;
+  }
+  .company-items div.com-info {
+    width: 100%;
+    font-size: 18px;
+    height: 94px;
+    display: -webkit-box;
+    float: left;
+  }
+  ::v-deep .el-carousel__button {
+    height: 6px;
+    width: 54px;
+  }
+  ::v-deep .el-button--text {
+    font-size: 18px;
+    margin-top: 40px;
+  }
+  ::v-deep .el-carousel__item .company-con {
+  }
+  .company-con .company-items {
+    display: flex;
+    flex-direction: row;
+  }
+  .company-con .company-items:nth-child(even) {
+    flex-direction: row-reverse;
+  }
+}
+@media (min-width: 1200px) {
+}
+@media (min-width: 1799px) {
+}
+</style>

components/Footer.vue

+<template>
+  <footer>
+    <div class="mt30"></div>
+    <div class="inner">
+      <div class="footer-con">
+        <div class="logo">
+          <img src="~/static/images/logo.png" alt="赤峰矿业网" />
+        </div>
+        <div class="mt20"></div>
+        <div class="contact">
+          <h2>全国统一服务热线</h2>
+          <p><a href="tel:0476567866">（0476）567 8669</a></p>
+        </div>
+      </div>
+      <div class="footer-con">
+        <div class="mt20"></div>
+        <p>
+          免责声明：免责条款的提出必须是明示的，不允许以默示方式作出，也不允许法官推定免责条款的存在。
+        </p>
+        <p>版权所有：Copyright©2016-2023威海晶合公司版权所有</p>
+        <div class="mt40"></div>
+        <ul>
+          <li><a href="/">网站首页</a></li>
+          <li><nuxt-link to="/ChiFeng">赤峰矿产</nuxt-link></li>
+          <li><nuxt-link to="/Transaction">矿权交易</nuxt-link></li>
+          <li><nuxt-link to="/Business">金融服务</nuxt-link></li>
+          <li><nuxt-link to="/technicalDocking">技术服务</nuxt-link></li>
+          <li><nuxt-link to="/News/list">新闻资讯</nuxt-link></li>
+          <!-- <li><nuxt-link to="#">供求信息</nuxt-link></li> -->
+        </ul>
+      </div>
+      <div class="mt40 dbn"></div>
+      <div class="footer-con gzh">
+        <!-- <div>
+          <img src="~/static/images/gzh.jpg" alt="" />
+          <p>公众号</p>
+        </div> -->
+        <div>
+          <img src="~/static/images/gzh.jpg" alt="" />
+          <p>公众号</p>
+        </div>
+      </div>
+      
+    </div>
+    <p style="text-align: center;">
+      <img style="width: 16px;" src="~/static/images/GA_pub.png" alt="" />
+      <a style="color: #fff;" href="https://beian.miit.gov.cn/" target="_blank">蒙ICP备2024020602号</a>
+    </p>
+    <div class="mt30"></div>
+  </footer>
+</template>
+
+<style scoped>
+.dbn {
+  display: block;
+}
+footer {
+  width: 100%;
+  background-color: #1c1e25;
+}
+footer > .inner {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.gzh {
+  display: flex;
+  justify-content: space-around;
+}
+.gzh > div {
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+}
+.gzh > div > img {
+  display: inline-block;
+  margin: 0 auto;
+}
+.gzh > div > p {
+  text-align: center;
+  line-height: 2em;
+}
+.logo img {
+  width: 30%;
+  display: block;
+  margin: 0 auto;
+  height: auto;
+  object-fit: cover;
+}
+.contact h2 {
+  color: #e8e6e6;
+  font-weight: normal;
+  text-align: center;
+}
+.contact > p > a {
+  text-align: center;
+  display: block;
+}
+.footer-con {
+  width: 90%;
+  margin: 0 auto;
+}
+.footer-con p,
+.footer-con:nth-child(2) ul > li > a {
+  color: #e8e6e6;
+  font-size: 0.16rem;
+}
+.footer-con:nth-child(2) ul {
+  display: flex;
+  justify-content: space-between;
+}
+.footer-con:nth-child(2) p {
+  text-align: center;
+}
+.contact p a {
+  color: #e8e6e6;
+}
+@media (min-width: 769px) {
+}
+@media (min-width: 993px) {
+  .dbn {
+    display: none;
+  }
+  footer > .inner {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+  }
+  .gzh {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .gzh > div {
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+  }
+  .gzh > div > img {
+    display: inline-block;
+    margin: 0 auto;
+  }
+  .gzh > div > p {
+    text-align: center;
+    line-height: 2em;
+  }
+  .footer-con {
+    width: 25%;
+  }
+  .footer-con:nth-child(2) {
+    width: 45%;
+  }
+  .contact h2 {
+    font-size: 24px;
+    text-align: left;
+  }
+  .contact p a {
+    font-size: 22px;
+    text-align: left;
+  }
+  .footer-con:nth-child(2) p {
+    font-size: 14px;
+  }
+  .gzh > div {
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+  }
+  .logo img {
+    width: 250px;
+    margin: 0;
+  }
+  .footer-con p,
+  .footer-con:nth-child(2) ul > li > a {
+    font-size: 16px;
+  }
+}
+@media (min-width: 1200px) {
+  .inner {
+    width: 1170px;
+  }
+  .gzh > div {
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+  }
+}
+@media (min-width: 1499px) {
+  .inner {
+    width: 1250px;
+  }
+  .gzh > div {
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+  }
+}
+</style>
\ No newline at end of file

components/FormWithParam.vue

+<template>
+  <div>
+    <div>电话联系：13188888888</div>
+    <p>我要咨询{{ receivedString }}留言</p>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="联系人">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="联系方式">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="联系人">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="留言">
+            <el-input type="textarea" v-model="form.desc"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 这里放置您的表单 -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    receivedString: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+    },
+  },
+};
+</script>

components/MarqueeComponent.vue

+<template>
+  <div class="marquee">
+    <div class="text" :style="marqueeStyle" @mouseenter="stop" @mouseleave="start">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+ 
+<script>
+export default {
+  props: {
+    duration: {
+      type: Number,
+      default: 20, // 默认滚动时间为20秒
+    },
+    direction: {
+      type: String,
+      default: 'left', // 默认向左滚动
+    },
+  },
+  data() {
+    return {
+      isScrolling: true,
+      marqueeStyle: {},
+    };
+  },
+  mounted() {
+    this.initMarquee();
+  },
+  methods: {
+    initMarquee() {
+      this.marqueeStyle = {
+        animation: `scroll ${this.duration}s linear infinite`,
+        direction: this.direction,
+      };
+    },
+    stop() {
+      this.isScrolling = false;
+    },
+    start() {
+      this.isScrolling = true;
+    },
+  },
+  watch: {
+    isScrolling(newVal) {
+      if (newVal) {
+        this.marqueeStyle.animationPlayState = 'running';
+      } else {
+        this.marqueeStyle.animationPlayState = 'paused';
+      }
+    },
+  },
+};
+</script>
+ 
+<style scoped>
+@keyframes scroll {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+ 
+.marquee {
+  overflow: hidden;
+  white-space: nowrap;
+}
+ 
+.text {
+  display: inline-block;
+  animation-play-state: running;
+}
+</style>
\ No newline at end of file

components/MyComponent.vue

+<template>
+  <div>
+    <h1>{{ title }}</h1>
+    <button @click="handleClick">Click me</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: "Hello, World!",
+    };
+  },
+  methods: {
+    handleClick() {
+      alert("Button clicked!");
+    },
+  },
+};
+</script>
\ No newline at end of file

components/PhoneNav.vue

+<template>
+  <div class="phone-nav">
+    <div class="logo">
+      <h1>赤峰矿业网</h1>
+      <img src="~/static/images/logo_in.png" alt="赤峰矿业网" />
+    </div>
+    <div class="menu-btn" @click="drawer = true">
+      <i
+        class="el-icon-s-fold"
+        :class="activeItem === 1 ? 'btn-color' : ''"
+      ></i>
+    </div>
+    <el-drawer title="导航" :visible.sync="drawer" :direction="direction">
+      <el-menu default-active="2" class="el-menu-vertical-demo">
+        <el-menu-item index="1">
+          <i class="el-icon-menu"></i>
+          <span slot="title"><nuxt-link to="/">首页</nuxt-link></span>
+        </el-menu-item>
+        <el-submenu index="2">
+          <template slot="title">
+            <i class="el-icon-location"></i>
+            <span><nuxt-link to="/News/list">新闻资讯</nuxt-link></span>
+          </template>
+          <el-menu-item index="2-1"
+            ><nuxt-link to="/News/more?id=1">国家政策</nuxt-link></el-menu-item
+          >
+          <el-menu-item index="2-2"
+            ><nuxt-link to="/News/more?id=2">行业动态</nuxt-link></el-menu-item
+          >
+          <el-menu-item index="2-3"
+            ><nuxt-link to="/News/more?id=3">市场行情</nuxt-link></el-menu-item
+          >
+          <el-menu-item index="2-4"
+            ><nuxt-link to="/News/more?id=4">法律法规</nuxt-link></el-menu-item
+          >
+        </el-submenu>
+        <el-submenu index="3">
+          <template slot="title">
+            <i class="el-icon-location"></i>
+            <span><nuxt-link to="/Transaction">矿权交易</nuxt-link></span>
+          </template>
+          <el-menu-item index="3-1"
+            ><nuxt-link to="/Transaction/seller"
+              >我要买矿</nuxt-link
+            ></el-menu-item
+          >
+          <el-menu-item index="3-2">我要卖矿</el-menu-item>
+        </el-submenu>
+        <el-menu-item index="4">
+          <i class="el-icon-menu"></i>
+          <span slot="title"
+            ><nuxt-link to="/Business">金融服务</nuxt-link></span
+          >
+        </el-menu-item>
+        <el-submenu index="5">
+          <template slot="title">
+            <i class="el-icon-location"></i>
+            <span>技术服务</span>
+          </template>
+          <el-menu-item index="5-1">矿业权服务</el-menu-item>
+          <el-menu-item index="5-2">专家资讯库</el-menu-item>
+          <el-menu-item index="5-3">技术支持</el-menu-item>
+        </el-submenu>
+        <el-menu-item index="6">
+          <i class="el-icon-menu"></i>
+          <span slot="title">赤峰矿产</span>
+        </el-menu-item>
+        <el-menu-item index="7">
+          <i class="el-icon-menu"></i>
+          <span slot="title">供求信息</span>
+        </el-menu-item>
+      </el-menu>
+    </el-drawer>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      drawer: false,
+      direction: "rtl",
+    };
+  },
+  props: {
+    activeItem: {
+      type: Number,
+      default: 2,
+    },
+  },
+};
+</script>
+<style scoped>
+.phone-nav {
+  position: fixed;
+  display: flex;
+  justify-content: space-between;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: 4002;
+  width: 100%;
+  height: 0.8rem;
+  background-color: #fff;
+}
+.phone-nav .logo {
+  width: 40%;
+  padding-top: 0.15rem;
+  float: left;
+}
+.phone-nav h1 {
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.menu-btn {
+  width: 0.5rem;
+  height: 0.5rem;
+  float: right;
+  cursor: pointer;
+  margin: 0.1rem;
+}
+
+::v-deep .el-drawer {
+  width: 70% !important;
+}
+.menu-btn ::v-deep .el-icon-s-fold {
+  font-size: 0.5rem;
+  color: #666;
+}
+.menu-btn .btn-color {
+  color: #666;
+}
+@media (min-width: 993px) {
+  .phone-nav {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file

components/QRCodeComponent.vue

+<template>
+  <div>
+    <canvas ref="qrCanvas"></canvas>
+  </div>
+</template>
+ 
+<script>
+// import QRCode from 'qrcode'
+ 
+export default {
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  },
+  mounted() {
+    this.generateQRCode()
+  },
+  methods: {
+    generateQRCode() {
+      QRCode.toCanvas(this.$refs.qrCanvas, this.text, error => {
+        if (error) console.error(error)
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file

components/ScrollingNotification.vue

+<template>
+  <div
+    class="scrolling-notification"
+    @mouseenter="stopAutoScroll"
+    @mouseleave="startAutoScroll"
+    v-if="notifications"
+  >
+    <ul class="notification-list">
+      <li
+        class="notification-item"
+        v-for="notification in visibleNotifications"
+        :key="notification.id"
+      >
+        <div class="por" @click="handleNotificationClick(notification)">
+          <span class="dc ovtext"></span>
+          <span class="ovtext">
+            {{ notification.title }}
+          </span>
+          <span class="ovtext"><div v-html="notification.details"></div> </span>
+          <span class="dc ovtext"> </span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import sendRequest from "~/utils/request.js";
+export default {
+  props: {
+    timeInterval: {
+      type: Number,
+      default: 3000,
+    },
+    notifications: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      visibleNotifications: [this.notifications[0]],
+      autoScrollInterval: null,
+      isMouseOver: false,
+    };
+  },
+  methods: {
+    startAutoScroll() {
+      if (!this.isMouseOver) {
+        this.autoScrollInterval = setInterval(
+          this.scrollNext,
+          this.timeInterval
+        );
+      }
+    },
+    stopAutoScroll() {
+      clearInterval(this.autoScrollInterval);
+    },
+    scrollNext() {
+      this.currentIndex = (this.currentIndex + 1) % this.notifications.length;
+      this.visibleNotifications = [this.notifications[this.currentIndex]];
+    },
+    handleNotificationClick(notification) {
+      // 处理点击通知的操作，执行路由导航或其他操作
+      this.stopAutoScroll();
+      if (notification.type === "新闻资讯") {
+        this.$router.push({ path: `/News?id=${notification.id}` });
+      } else if (notification.type === "矿业权管理") {
+        this.$router.push({
+          path: `/TechnicalDocking/mmqManagement?id=${notification.id}`,
+        });
+      } else if (notification.type === "金融服务") {
+        this.$router.push({ path: `/Company?id=${notification.id}` });
+      }
+      // 示例：执行路由导航
+      // this.$router.push(this.getNotificationLink(notification));
+    },
+    getNotificationLink(notification) {
+      // 根据要求构建带有id和类型的链接
+      return {
+        name: "notification", // 路由名称，需要在路由配置中定义
+        params: { id: notification.id, type: notification.type },
+      };
+    },
+    async getHomeTop() {
+      try {
+        let that = this;
+        const getHomeTop = await sendRequest(
+          "business/homePage/listAll",
+          "get"
+        );
+        console.log(carouselList);
+        // this.newsCarouselData = carouselList.rows.map((item) => {
+        //   return {
+        //     newsId: item.newsId,
+        //     newsTitle: item.newsTitle,
+        //     newsPic: item.newsPic,
+        //   };
+        // });
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    },
+  },
+  mounted() {
+    console.log(this.notifications);
+    if (this.notifications) {
+      this.visibleNotifications = [this.notifications[0]];
+      this.startAutoScroll();
+    }
+
+    // this.getHomeTop();
+  },
+};
+</script>
+
+<style scoped>
+.scrolling-notification {
+  overflow: hidden;
+  height: 40px; /* 控制通知条的高度，根据需要调整 */
+}
+
+.notification-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.notification-item {
+  cursor: pointer;
+  font-family: "ysbth";
+  color: #fff;
+  padding: 5px;
+  transform: translateY(0);
+  transition: transform 0.5s;
+  font-size: 28px;
+}
+
+.notification-item:hover {
+  background: rgba(25, 97, 197, 0.52);
+}
+.notification-item div {
+  display: grid;
+  grid-template-columns: 0.3fr 1fr 3fr 0.3fr;
+}
+.notification-item div::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 32px;
+  height: 26px;
+  background: #000;
+  background: url("~/static/images/notice.png") no-repeat center;
+  background-size: cover;
+  animation: blink 1s infinite;
+}
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

components/SideBarBox.vue

+<!-- components/SideBarBox.vue -->
+<template>
+  <div class="side_bar_box" v-show="show">
+    <div
+      class="side_bar_item has_border center"
+      v-for="item in boxArr"
+      :key="item.id"
+      @click="scrollToAnchor(item.anchor)"
+      @mouseover="changeImgSrc(item)"
+      @mouseout="resetImgSrc(item)"
+    >
+      <img :class="`img${item.id}`" :src="item.urlDef"  alt="" >
+      <div class="href">
+        <p v-for="(name, i) in splitBySlash(item.name)" :key="i">
+          {{ name }}
+        </p>
+      </div>
+    </div>
+    <div class="side_bar_item no_border pointer"
+      @click="scrollToTop"
+      @mouseover="changeImgSrc('top')"
+      @mouseout="resetImgSrc('top')"
+    >
+      <img :src="topSrc" class="top_icon">
+      <p>顶部</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    boxArr: {
+      type: Array,
+      default: () => [],
+      validator: function (array) {
+        return array.every(
+          (item) =>
+            typeof item === 'object' &&
+            'name' in item &&
+            'anchor' in item &&
+            'urlDef' in item &&
+            'urlAct' in item &&
+            'id' in item
+        );
+      },
+    },
+  },
+  data() {
+    return {
+      show: false,
+      topSrc:require("~/static/images/sideLink/top.png"),
+    };
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+  methods: {
+    splitBySlash(str) {
+      if (str.includes('/')) {
+        return str.split('/');
+      } else {
+        return [str];
+      }
+    },
+    scrollToAnchor(anchor) {
+      const element = document.getElementById(anchor);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    },
+    scrollToTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    },
+    handleScroll() {
+      if (window.scrollY > 350) {
+        this.show = true;
+      } else {
+        this.show = false;
+      }
+    },
+    changeImgSrc(item){
+      if(item === 'top') {
+        this.topSrc = require("~/static/images/sideLink/top-act.png");
+      }else{
+        const element = document.querySelector(`.img${item.id}`);
+        element.src = item.urlAct;
+      }
+      
+    },
+    resetImgSrc(item){
+      if(item === 'top') {
+        this.topSrc = require("~/static/images/sideLink/top.png");
+      }else{
+        const element = document.querySelector(`.img${item.id}`);
+        element.src = item.urlDef;
+      }
+    }
+   
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+.side_bar_box {
+  position: fixed;
+  right: 20px;
+  bottom: 50%;
+  transform: translateY(50%);
+  z-index: 999;
+  width: 88px;
+  background: #FFFFFF;
+  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.12);
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.05);
+
+  .side_bar_item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    line-height: 1.2;
+    font-size: 14px;
+    word-break: break-all;
+    transition: all 0.5s ease;
+    cursor: pointer;
+    margin-bottom: 2px;
+    img{
+      width: 34px;
+      height: 34px;
+    }
+
+    &:hover {
+      background-color: #0f78e6;
+      color: #fff;
+    }
+
+    .href {
+      position: relative;
+      // width: 2em;
+      // padding: 2px 4px;
+      display: block;
+      // margin: 8px 0;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      margin-bottom: 10px;
+      p{
+        width: 60px;
+        // text-align: justify;
+        line-height: 1em;
+        // &::after{
+        //   content: "";
+        //   display: inline-block;
+        //   width: 100%;
+        //   visibility: hidden;
+        // }
+      }
+
+      &:before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: -11px;
+        height: 1px;
+        background: #cfd3df;
+      }
+
+    }
+
+    
+
+    .top_icon {
+      width: 34px;
+      height: auto;
+    }
+  }
+  &:last-child  {
+    cursor: pointer;
+    padding: 12px 0;
+    &:before {
+      // @extend .no_border;
+    }
+  }
+
+  // .has_border:before {
+  //   content: "";
+  //   position: absolute;
+  //   width: 100%;
+  //   left: 0;
+  //   bottom: -4px;
+  //   height: 1px;
+  //   background: #cfd3df;
+  // }
+  // .no_border:before {
+  //   content: "";
+  //   position: absolute;
+  //   width: 0;
+  //   left: 0;
+  //   bottom: -4px;
+  //   height: 0px;
+  //   background: rgb(207, 211, 223,0);
+  // }
+}
+
+</style>

components/Transaction/sell.vue

+<template>
+  <div class="sell">
+    <div class="inner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
\ No newline at end of file

components/tech/TopList.vue

+<template>
+  <div>
+    <ul class="tech-flex">
+      <li
+        :class="{ active: num == item.id }"
+        @click.prevent="handleClick(item.id)"
+        v-for="item in topArr"
+        :key="item.id"
+      >
+        {{ item.name }}
+      </li>
+    </ul>
+    <div class="tech-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    num: {
+      type: Number,
+      required: true,
+      default: 1,
+    },
+    topArr: Array,
+  },
+  data() {
+    return {
+      activeIndex: this.num,
+    };
+  },
+  methods: {
+    handleClick(itemId) {
+      console.log(itemId, "itemId");
+      this.activeIndex = itemId;
+      this.$emit("li-click", itemId);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tech-flex {
+  display: flex;
+  width: 100%;
+  justify-content: space-evenly;
+}
+
+.tech-flex li.active {
+  color: #fff;
+  background: #1961c5;
+}
+.tech-flex li {
+  background: #fff;
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
+  color: #666666;
+  cursor: pointer;
+  text-align: center;
+  font-size: 30px;
+  transition: all 0.5s ease;
+}
+.tech-flex li:hover {
+  color: #fff;
+  background: rgba(25, 97, 197, 0.5);
+}
+@media (min-width: 769px) {
+}
+@media (min-width: 993px) {
+  .tech-flex li {
+    padding: 10px 10px;
+  }
+}
+@media (min-width: 1200px) {
+  .tech-flex li {
+    padding: 10px 20px;
+  }
+}
+@media (min-width: 1799px) {
+  .tech-flex li {
+    padding: 10px 40px;
+  }
+}
+</style>

pages/Transaction/form/buy.vue

+<template>
+  <div>我要买矿</div>
+</template>
\ No newline at end of file