From 3c1a5e5020017a26f1754cdd6f5a284bd990919e Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Wed, 17 Sep 2025 18:01:08 +0800
Subject: [PATCH] updata

---
 .../src/components/HomePageSticky/index.vue   |  85 ++
 .../unsubscribe/BaiduNetdisk.vue/index.vue    |   1 +
 .../src/views/homePage/about/index.vue        |   3 +-
 .../homePage/components/topBox/index.vue      |   6 +-
 f/web-kboss/src/views/homePage/index.vue      |   4 +-
 .../src/views/homePage/mainPage/index.vue     | 165 ++--
 .../src/views/homePageMobile/index.vue        |   5 +-
 f/web-kboss/src/views/product/index copy.vue  | 811 ++++++++++++++++++
 .../src/views/product/mainPage/index.vue      |  10 +-
 9 files changed, 974 insertions(+), 116 deletions(-)
 create mode 100644 f/web-kboss/src/components/HomePageSticky/index.vue
 create mode 100644 f/web-kboss/src/views/product/index copy.vue

diff --git a/f/web-kboss/src/components/HomePageSticky/index.vue b/f/web-kboss/src/components/HomePageSticky/index.vue
new file mode 100644
index 0000000..acc3098
--- /dev/null
+++ b/f/web-kboss/src/components/HomePageSticky/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div class="sticky" v-show="shouldShow">
+      <div
+        class="sticky-box"
+        @click="navigateTo(index)"
+        v-for="(item, index) in sections"
+        :key="index"
+      >
+        {{ item.title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StickyNavigation',
+  props: {
+    // 接收父组件传递的导航项数据
+    sections: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      shouldShow: false
+    }
+  },
+  methods: {
+    checkScreenHeight() {
+      const screenHeight = window.innerHeight;
+      // 可以根据实际需求调整阈值
+      this.shouldShow = screenHeight >= 900;
+
+
+    },
+    // 点击导航项时，向父组件发送事件和索引
+    navigateTo(index) {
+      // console.log('子组件触发导航，索引:', index);
+      // $emit 向父组件发送 'navigate' 事件，并传递索引
+      this.$emit('navigate', index);
+    }
+  },
+  mounted() {
+    this.checkScreenHeight();
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.sticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  z-index: 100;
+  padding: 10px 0;
+}
+
+.sticky-box {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0 20px;
+  padding: 10px 20px;
+  color: #000;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.sticky-box:hover {
+  color: #366EF4;
+  background-color: #f0f8ff;
+}
+</style>
diff --git a/f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue b/f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue
index 0cff597..186d7a0 100644
--- a/f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue
+++ b/f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="box">
+
     <iframe src="https://console.vcp.baidu.com/billing/#/refund/list" frameborder="0" class="baidu-style"></iframe>
   </div>
 </template>
diff --git a/f/web-kboss/src/views/homePage/about/index.vue b/f/web-kboss/src/views/homePage/about/index.vue
index 5ad8a5e..2ecfe32 100644
--- a/f/web-kboss/src/views/homePage/about/index.vue
+++ b/f/web-kboss/src/views/homePage/about/index.vue
@@ -6,6 +6,7 @@
       </span>
       <!--      <span style="color: #0e0b0b">Company Introduction</span>-->
     </div>
+    
     <div class="mainBox" style="padding-top: 35px">
       <!--      <div style="text-align: center;font-weight: bold;font-size: 26px;margin: 50px 0 15px;">公司介绍</div>-->
       <div class="inBox">
@@ -63,7 +64,7 @@
         </li>
         <li>
           <span class="icon"><img
-            src="./img/3.png" 
+            src="./img/3.png"
             alt=""></span>
           <div class="title">价值观</div>
           <div class="description">
diff --git a/f/web-kboss/src/views/homePage/components/topBox/index.vue b/f/web-kboss/src/views/homePage/components/topBox/index.vue
index 1ec2d85..7c71ce4 100644
--- a/f/web-kboss/src/views/homePage/components/topBox/index.vue
+++ b/f/web-kboss/src/views/homePage/components/topBox/index.vue
@@ -801,7 +801,7 @@ export default Vue.extend({
   }
 
   .main-nav {
-
+    z-index: 10000;
     ul {
       display: flex;
       list-style: none;
@@ -1066,7 +1066,7 @@ export default Vue.extend({
   color: #222F60;
   cursor: pointer;
   transition: color 0.3s ease;
-  
+
   &:hover {
     color: #1E6FFF;
   }
@@ -1080,7 +1080,7 @@ export default Vue.extend({
       justify-content: space-between;
       align-items: center;
     }
-    
+
     .user-area {
       justify-content: flex-end;
       flex-shrink: 0;
diff --git a/f/web-kboss/src/views/homePage/index.vue b/f/web-kboss/src/views/homePage/index.vue
index afaa79b..3c9aa19 100644
--- a/f/web-kboss/src/views/homePage/index.vue
+++ b/f/web-kboss/src/views/homePage/index.vue
@@ -106,7 +106,7 @@
         <router-link  target="_blank" :to="{ name: 'homePageImage' }">经营性网站备案信息</router-link>
       </el-col>
     </el-row>
-  </div>
+   </div>
 </template>
 
 <script>
@@ -251,7 +251,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .pageHome {
   background-color: #f9f5f5;
   overflow-x: hidden;
diff --git a/f/web-kboss/src/views/homePage/mainPage/index.vue b/f/web-kboss/src/views/homePage/mainPage/index.vue
index 9e601b7..0454368 100644
--- a/f/web-kboss/src/views/homePage/mainPage/index.vue
+++ b/f/web-kboss/src/views/homePage/mainPage/index.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="mainBox">
+
+    <HomePageSticky
+      ref="stickyNav"
+      :sections="stickySections"
+      @navigate="handleNavigation"
+    ></HomePageSticky>
+
     <div id="banner" class="banner">
       <div class="centerBox">
         <span style="margin-top: 100px" class="title">
@@ -12,6 +19,7 @@
           <li>全 球 领 先 的 AI 服 务 运 营 商</li>
         </ul>
       </div>
+
       <div style="cursor: pointer" class="tag">
         <span @click="openTalk" class="product">
           <span class="productName">4090 裸金属</span>
@@ -33,7 +41,8 @@
       </div>
     </div>
 
-    <div class="base">
+    <!-- 为每个主要区域添加 ref，用于平滑滚动定位 -->
+    <div ref="baseSection" class="base">
       <div class="bg"></div>
       <div class="itemTitle">
         <span class="topText">
@@ -55,7 +64,6 @@
         </li>
       </ul>
 
-      <!-- 添加 transition 包裹 baseItem 内容 -->
       <transition name="slide-fade" mode="out-in">
         <div
           :key="currentBaseMenu"
@@ -99,7 +107,7 @@
       </transition>
     </div>
 
-    <div class="suan">
+    <div ref="suanSection" class="suan">
       <div class="bg"></div>
       <div class="itemTitle">
         <span class="topText">
@@ -121,7 +129,6 @@
         </li>
       </ul>
 
-      <!-- 添加 transition 包裹 suanItem 内容 -->
       <transition name="slide-fade" mode="out-in">
         <div :key="currentSuanMenu" class="itemContentSuan">
           <span class="title">{{ suanItem.title }}</span>
@@ -159,7 +166,7 @@
       </transition>
     </div>
 
-    <div class="net">
+    <div ref="netSection" class="net">
       <div class="bg"></div>
       <div class="itemTitle">
         <span class="topText">
@@ -180,7 +187,6 @@
         </li>
       </ul>
 
-      <!-- 添加 transition 包裹 netItem 内容 -->
       <transition name="slide-fade" mode="out-in">
         <div :key="currentNetMenu" class="itemContentNet">
           <span style="margin-bottom: 15px" class="title">{{ netItem.title }}</span>
@@ -227,7 +233,6 @@
 
     <div v-show="false" class="resources">
       <div class="bg"></div>
-
       <div style="margin-top: 140px" class="itemTitle">
         <span class="topText">
           <span>算力</span>
@@ -253,7 +258,6 @@
               <span class="title">上海</span>
               <img src="./img/map.png" alt="" />
             </span>
-
             <span class="mapItem" style="top: 261px; right: 174px">
               <span class="title">江苏</span>
               <img src="./img/map.png" alt="" />
@@ -300,6 +304,7 @@
         </div>
       </div>
     </div>
+
     <div class="tiyan">
       <div>
         <el-input v-model="phone" placeholder="请输入您的手机号" class="custom-input">
@@ -358,119 +363,51 @@ import LogoG from "@/views/homePage/mainPage/logoG/index.vue";
 import { mapState } from "vuex";
 import IndexTwo from "@/views/homePage/mainPage/logoG/indexTwo.vue";
 
+import HomePageSticky from "@/components/HomePageSticky/index.vue";
+
 export default Vue.extend({
   name: "mainPage",
-  components: { IndexTwo, LogoG, Talk },
+  components: { IndexTwo, LogoG, Talk, HomePageSticky },
   data() {
     return {
-      mesDialog: localStorage.getItem('showMsg') !== '1', // 初始状态
+      mesDialog: localStorage.getItem('showMsg') !== '1',
       phone: null,
-      currentBaseMenu: "hot", // 默认选中热门推荐
+      currentBaseMenu: "hot",
       currentNetMenu: "hot",
       currentSuanMenu: 'hot',
       suanMenu: [
-        {
-          id: "hot",
-          name: "热门推荐",
-          icon: require("../newImg/niu.png"),
-          activeIcon: require("../newImg/niuActive.png")
-        },
-        {
-          id: "4090",
-          name: "4090",
-          icon: require("./img/suan/1.png"),
-          activeIcon: require("./img/suan/1.png"),
-        },
-        {
-          id: "A100",
-          name: "A100",
-          icon: require("./img/suan/2.png"),
-          activeIcon: require("./img/suan/2.png"),
-        },
-        {
-          id: "A800",
-          name: "A800",
-          icon: require("./img/suan/3.png"),
-          activeIcon: require("./img/suan/3.png"),
-        },
-        {
-          id: "910B",
-          name: "910B",
-          icon: require("./img/suan/5.png"),
-          activeIcon: require("./img/suan/5.png"),
-        }
+        { id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
+        { id: "4090", name: "4090", icon: require("./img/suan/1.png"), activeIcon: require("./img/suan/1.png") },
+        { id: "A100", name: "A100", icon: require("./img/suan/2.png"), activeIcon: require("./img/suan/2.png") },
+        { id: "A800", name: "A800", icon: require("./img/suan/3.png"), activeIcon: require("./img/suan/3.png") },
+        { id: "910B", name: "910B", icon: require("./img/suan/5.png"), activeIcon: require("./img/suan/5.png") }
       ],
-
       baseMenu: [
-        {
-          id: "hot",
-          name: "热门推荐",
-          icon: require("../newImg/niu.png"),
-          activeIcon: require("../newImg/niuActive.png")
-        },
-        {
-          id: "computing",
-          name: "计算",
-          icon: require("../newImg/computing.png"),
-          activeIcon: require("../newImg/computingActive.png")
-        },
-        {
-          id: "storage",
-          name: "存储",
-          icon: require("../newImg/cun.png"),
-          activeIcon: require("../newImg/cunActive.png")
-        },
-        {
-          id: "database",
-          name: "数据库",
-          icon: require("../newImg/database.png"),
-          activeIcon: require("../newImg/databaseActive.png")
-        },
-        {
-          id: "container",
-          name: "人脸识别",
-          icon: require("../newImg/container.png"),
-          activeIcon: require("../newImg/containerActive.png")
-        }
+        { id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
+        { id: "computing", name: "计算", icon: require("../newImg/computing.png"), activeIcon: require("../newImg/computingActive.png") },
+        { id: "storage", name: "存储", icon: require("../newImg/cun.png"), activeIcon: require("../newImg/cunActive.png") },
+        { id: "database", name: "数据库", icon: require("../newImg/database.png"), activeIcon: require("../newImg/databaseActive.png") },
+        { id: "container", name: "人脸识别", icon: require("../newImg/container.png"), activeIcon: require("../newImg/containerActive.png") }
       ],
       netMenu: [
-        {
-          id: "hot",
-          name: "热门推荐",
-          icon: require("../newImg/niu.png"),
-          activeIcon: require("../newImg/niuActive.png")
-        },
-        {
-          id: "hlzx",
-          name: "互联网专线",
-          icon: require("./img/net/1.png"),
-          activeIcon: require("./img/net/1.png"),
-        },
-        {
-          id: "SDWAN",
-          name: "SDWAN",
-          icon: require("./img/net/2.png"),
-          activeIcon: require("./img/net/2.png"),
-        },
-        {
-          id: "DCI",
-          name: "DCI",
-          icon: require("./img/net/3.png"),
-          activeIcon: require("./img/net/3.png"),
-        },
-        {
-          id: "AI",
-          name: "AI专线",
-          icon: require("./img/net/4.png"),
-          activeIcon: require("./img/net/4.png"),
-        }
+        { id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
+        { id: "hlzx", name: "互联网专线", icon: require("./img/net/1.png"), activeIcon: require("./img/net/1.png") },
+        { id: "SDWAN", name: "SDWAN", icon: require("./img/net/2.png"), activeIcon: require("./img/net/2.png") },
+        { id: "DCI", name: "DCI", icon: require("./img/net/3.png"), activeIcon: require("./img/net/3.png") },
+        { id: "AI", name: "AI专线", icon: require("./img/net/4.png"), activeIcon: require("./img/net/4.png") }
       ],
       base: {},
       baseItem: {},
       net: {},
       netItem: {},
       suan: {},
-      suanItem: {}
+      suanItem: {},
+      // 定义导航项数据，传递给子组件
+      stickySections: [
+        { title: '云筑企业基座', ref: 'baseSection' },
+        { title: '智算未来征程', ref: 'suanSection' },
+        { title: '网织智能经纬', ref: 'netSection' },
+      ]
     }
   },
   mounted() {
@@ -513,7 +450,7 @@ export default Vue.extend({
     },
     handleClose() {
       localStorage.setItem('showMsg', '1');
-      this.mesDialog = false; // 手动关闭弹窗
+      this.mesDialog = false;
     },
     openTalk() {
       this.$store.commit('setShowTalk', true);
@@ -552,7 +489,18 @@ export default Vue.extend({
       this.currentNetMenu = menu.id;
       this.netItem = this.net[menu.id] || {};
     },
-
+    // 处理来自子组件的导航事件
+    handleNavigation(index) {
+      console.log('父组件接收到导航事件，索引:', index);
+      const sectionRef = this.stickySections[index]?.ref;
+      if (sectionRef && this.$refs[sectionRef]) {
+        // 使用原生 scrollIntoView 实现平滑滚动
+        this.$refs[sectionRef].scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
+    }
   },
 })
 </script>
@@ -1393,4 +1341,11 @@ export default Vue.extend({
     border: none;
   }
 }
+.position{
+  width: 100%;
+  height: 100%;
+  position: sticky;
+  top: 0px;
+  z-index: 999;
+}
 </style>
diff --git a/f/web-kboss/src/views/homePageMobile/index.vue b/f/web-kboss/src/views/homePageMobile/index.vue
index 0f427c3..c03f904 100644
--- a/f/web-kboss/src/views/homePageMobile/index.vue
+++ b/f/web-kboss/src/views/homePageMobile/index.vue
@@ -107,10 +107,13 @@
       </el-col>
     </el-row>
   </div>
+
 </template>
 
 <script>
 import { getLogoAPI } from "@/api/login";
+
+
 export default {
   data() {
     return {
@@ -215,7 +218,7 @@ export default {
             this.logoText = this.photosUrl.orgname;
             this.ICP = this.photosUrl.license_number;
             this.address = this.photosUrl.address;
-          } 
+          }
         } else {
           this.$message({
             message: res.msg,
diff --git a/f/web-kboss/src/views/product/index copy.vue b/f/web-kboss/src/views/product/index copy.vue
new file mode 100644
index 0000000..734c653
--- /dev/null
+++ b/f/web-kboss/src/views/product/index copy.vue	
@@ -0,0 +1,811 @@
+<template>
+  <div class="box">
+    <div class="product">
+      <!--        <div v-html="temp"></div>-->
+      <div class="search">
+        <el-card>
+          <el-form :model="form" label-width="100px">
+            <el-form-item label="产品区域:">
+              <el-radio-group v-model="form.product_area" size="small" @input="searchProduct">
+                <el-radio-button :label="item" :value="item" v-for="(item, index) in product_area" :key="index"></el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="产品类型:">
+              <el-radio-group v-model="form.ptype" size="small" @input="searchProduct">
+                <el-radio-button :label="item" :value="item" v-for="(item, index) in ptype" :key="index"></el-radio-button>
+              </el-radio-group>
+              <el-button type="primary" size="small" style="margin-left: 10px" @click="resetSearch">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+      <!-- v-infinite-scroll="load" -->
+      <div class="productBig" >
+        <el-card class="productList" v-for="(item, index) in this.discountProductList" :key="index">
+          <div slot="header" class="cardHeader">
+            <span>
+              {{ item.name }}
+              <el-button style="float: right; margin-left: 5px" type="primary" size="small" @click="payFirst(item)">购买</el-button>
+              <!-- <el-button style="float: right" type="primary" size="small" @click="inShoppingCard(item)">加入购物车</el-button> -->
+            </span>
+          </div>
+          <div class="cardBody">
+            <el-row :span="24">
+              <el-col :span="12" class="productDiscription">
+                <span class="label">产品描述:</span>
+                <div>{{ item.description }}</div>
+              </el-col>
+              <el-col :span="6" class="productDiscription">
+                <span class="label">产品类型:</span>
+                <div>{{ item.ptype }}</div>
+              </el-col>
+              <el-col :span="6" class="productDiscription" v-if="item.discount_price && item.discount">
+                <span>单价:¥</span>
+                <span class="discountPrice">{{ item.discount_price }}</span>
+                <span class="price">{{ item.price }}</span>
+                <div class="discount">{{ item.discount }}折</div>
+              </el-col>
+              <el-col :span="6" class="productDiscription" v-else>
+                <span>单价:¥</span>
+                <span class="productPrice">{{ item.price }}</span>
+              </el-col>
+            </el-row>
+            <el-row :span="24">
+              <el-col :span="6" class="productDiscription">
+                <span>产品编码:</span>
+                <div>{{ item.product_code }}</div>
+              </el-col>
+              <el-col :span="6" class="productDiscription">
+                <span>起效时间:</span>
+                <div>{{ item.effect_date }}</div>
+              </el-col>
+              <el-col :span="6" class="productDiscription">
+                <span>失效时间:</span>
+                <div>{{ item.expire_date }}</div>
+              </el-col>
+              <el-col :span="6" class="productDiscription">
+                <span>发布方式:</span>
+                <div>{{ item.publish_method }}</div>
+              </el-col>
+            </el-row>
+            <el-row :span="24">
+              <el-col :span="12" class="productDiscription">
+                <span >规格说明:</span>
+                <div style="width: 80%;display: flex">{{ item.spec_note }}</div>
+              </el-col>
+              <el-col :span="6" class="productDiscription">
+                <span>规格模板:</span>
+                <div>{{ item.specific_pattern }}</div>
+              </el-col>
+              <el-col :span="6" class="productDiscription">
+                <span class="label">产品区域:</span>
+                <div>{{ item.product_area }}</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </div>
+    </div>
+
+    <!-- 立即购买弹窗 -->
+    <el-dialog :title="title + productDetail.name" :visible.sync="dialogVisible" width="30%" class="myDialog" :before-close="close">
+      <el-form ref="payForm" :model="productDetail" label-width="100px" :rules="payForm">
+        <div style="overflow-y: scroll; height: 400px">
+          <el-form-item label="产品描述:">
+            <div>{{ productDetail.description }}</div>
+          </el-form-item>
+          <el-form-item label="产品价格:">
+            <div>{{ productDetail.price }}</div>
+          </el-form-item>
+          <el-form-item label="折后价:" v-if="productDetail.discount_price && productDetail.discount">
+            <div>{{ productDetail.discount_price }}</div>
+          </el-form-item>
+          <el-form-item label="折扣:" v-if="productDetail.discount_price && productDetail.discount">
+            <div>{{ productDetail.discount }}</div>
+          </el-form-item>
+
+          <div id="renderMoban" v-if="isShow">
+            <el-form-item label="路由数:" prop="route_num">
+              <el-select v-model="productDetail.route_num" placeholder="请选择路由数" @change="searchMoney(productDetail.route_num)">
+                <el-option v-for="(item,index) in route_numList" :key="index" :label="item.route_num" :value="item.route_num">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="带宽:" prop="broadband">
+              <el-select v-model="productDetail.broadband" placeholder="请选择带宽" @change="searchMoney(productDetail.broadband)">
+                <el-option v-for="(item,index) in broadbandList" :key="index" :label="item.broadband" :value="item.broadband">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="高校:" prop="high_school">
+              <el-select v-model="productDetail.high_school" placeholder="请选择高校" @change="searchMoney(productDetail.high_school)">
+                <el-option v-for="(item,index) in schoolList" :key="index" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="超算中心:" prop="chaosuan_center">
+              <el-select v-model="productDetail.chaosuan_center" placeholder="请选择超算中心" @change="searchMoney(productDetail.chaosuan_center)">
+                <el-option v-for="(item,index) in chaosuan_centerList" :key="index" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="距离:" @change="searchMoney(productDetail.distance)">
+              <el-select v-model="productDetail.distance" placeholder="请选择距离" disabled>
+                <el-option v-for="(item,index) in distanceList" :key="index" :label="item.distance" :value="item.distance">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <el-form-item label="购买数量:" prop="quantity">
+            <el-input v-model="productDetail.quantity" placeholder="请输入购买数量" />
+          </el-form-item>
+          <el-form-item label="产品区域:">
+            <div>{{ productDetail.product_area }}</div>
+          </el-form-item>
+          <el-form-item label="产品类型:">
+            <div>{{ productDetail.ptype }}</div>
+          </el-form-item>
+        </div>
+        <el-form-item>
+          <el-button size="small" type="primary" @click="onSubmit('form')">加入购物车</el-button>
+          <el-button size="small" @click="handleClose('form')">立即购买</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+
+    <!-- 阿里云产品弹窗 -->
+    <el-dialog :visible.sync="AliVisible" fullscreen center title=" " class="aLiDialog">
+      <div class="buy">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="自定义购买" name="customPurchase">
+            <el-row class="content">
+              <el-col :span="18" class="left">
+                <el-card>
+                  <el-row class="payType">
+                    <el-col :span="3" class="payTypeTitle">
+                      <span class="payTypeItem">付费类型</span>
+                      <el-tooltip effect="light">
+                        <div slot="content" class="light">
+                          包年包月<br />
+                          <ul>
+                            <li>按月购买及续费，为预付费模式</li>
+                            <li>若购买中国内地地域的 ECS 用于网站 Web 访问，请及时备案</li>
+                            <li>若 ECS 用于 SLB，请前往 SLB 新购页面购买带宽，ECS 仅需保留少<br />量带宽以便您管理</li>
+                          </ul>
+                          按量付费<br />
+                          <ul>
+                            <li>按实际开通时长以小时为单位进行收费，后付费模式</li>
+                            <li>按量付费 ECS 不支持备案服务</li>
+                          </ul>
+                          抢占式实例<br />
+                          <ul>
+                            <li>相对于按量付费实例价格有一定的折扣，价格随供求波动，按实际<br />使用时长进行收费，后付费模式</li>
+                            <li>您愿意支付每小时的实例最高价。当您的出价高于当前市场成交价<br />时，您的实例就会运行</li>
+                            <li>阿里云会根据供需资源或市场成交价的变化释放您的抢占式实例。</li>
+                            <li>抢占式实例不支持备案服务</li>
+                          </ul>
+                        </div>
+                        <i class="el-icon-warning-outline"></i>
+                      </el-tooltip>
+                    </el-col>
+                    <el-col :span="21" class="payTypeList">
+                      <div class="bigDiv">
+                        <div class="divSon" v-for="item in payTypeList" :key="item.index" @mouseenter="changeColor">
+                          <div class="divSonItem" @click="payType(item.index)">{{item.payType}}</div>
+                          <div class="divSonTitle">{{item.title}}</div>
+                        </div>
+                      </div>
+                      <div class="attention">
+                        <span class="useKnow">使用须知</span>
+                        <div class="explain">按量付费实例不支持备案服务</div>
+                        <!-- <div  class="explain">您可以稳定持有抢占式实例至少一小时。一小时后，当市场价格高于您的出价或资源供需关系变化时，抢占式实例会被自动释放，请做好数据备份工作
+                          有状态应用，比如数据库，不宜使用抢占式实例 <br />
+                          抢占式实例不支持备案服务
+                        </div> -->
+                      </div>
+                    </el-col>
+                  </el-row>
+
+                  <el-row class="aere">
+                    <el-col class="aereCol" :span="3">
+                      <span class="aereSpan">地域</span>
+                      <el-tooltip effect="light">
+                        <div slot="content">地域指所在的地理区域，通常按照<br /> 数据中心所在的城市划分</div>
+                        <i class="el-icon-warning-outline"></i>
+                      </el-tooltip><br />
+                      <!-- <span>如何选择地域</span> -->
+                    </el-col>
+                    <el-col :span="21" class="aereList">
+                      <el-button size="small" :round="false" @click="DistrictShow">华东1(杭州) <i class="el-icon-caret-bottom"></i></el-button>
+                      <div class="discrption">不同地域的实例之间内网互不相通；选择靠近您客户的地域，可降低网络时延、提高您客户的访问速度</div>
+                      <div class="aereDiv" v-if="isDistrictShow">
+                        <div>
+                          <span>亚太-中国</span>
+                          <el-row :gutter="5" v-for="item in Asia_China" :key="item.RegionId">
+                            <el-col :span="8">
+                              <span>{{item.LocalName}}</span>
+                            </el-col>
+                          </el-row>
+                        </div>
+
+                      </div>
+                    </el-col>
+                  </el-row>
+
+                  <el-row class="network">
+                    <el-col>
+                      <span class="networkItem">网络及可用区</span>
+                    </el-col>
+                  </el-row>
+                </el-card>
+
+              </el-col>
+              <el-col :span="6" class="right"></el-col>
+            </el-row>
+
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import {
+  getDiscontProductSearchAPI,
+  addOrderAPI,
+  addShoppingCartAPI, getDescribeRegionsAPI
+} from "@/api/product/product";
+import { wlwl_parameter_searchAPI } from "@/api/operation/specificationTemplateManagement";
+export default {
+  data() {
+    return {
+      temp: '',
+      isShow: false,
+      isMoban: true,
+      dialogVisible: false,
+      isAddShopCard: false,
+      isDistrictShow: false,
+      AliVisible: false,
+      activeName: 'customPurchase',
+      discountProductList: [],
+      userId: sessionStorage.getItem("userId"),
+      route_numList: [], //路由数
+      distanceList: [], //距离
+      broadbandList: [], //带宽
+      schoolList: [], //高校
+      chaosuan_centerList: [], //超算中心
+      payTypeList: [//付费类型
+        {
+          index: 1,
+          payType: '包年包月',
+          title: '先付费后使用,价格优惠'
+        },
+        {
+          index: 2,
+          payType: '按量计费',
+          title: '先试用后付费,按需开通'
+        },
+        {
+          index: 3,
+          payType: '抢占式实例',
+          title: '较按量付费最高可省90%'
+        },
+      ],
+      Asia_China: [],
+      Asia_Other: [],
+      Europe_America: [],
+      Middle_East: [],
+      form: {
+        product_area: "",
+        ptype: "",
+      },
+      isReset: false,
+      radio: "",
+      product_area: [],
+      ptype: [],
+      title: "",
+      payForm: {
+        quantity: [
+          { required: true, message: "请输入购买数量", trigger: "blur" },
+        ],
+        route_num: [
+          { required: true, message: "请选择路由数", trigger: "change" },
+        ],
+        broadband: [
+          { required: true, message: "请选择带宽", trigger: "change" },
+        ],
+        high_school: [
+          { required: true, message: "请选择高校", trigger: "change" },
+        ],
+        chaosuan_center: [
+          { required: true, message: "请选择超算中心", trigger: "change" },
+        ],
+      },
+      productDetail: {
+        quantity: "",
+        route_num: "",
+        broadband: "",
+        distance: "",
+        high_school: "",
+        chaosuan_center: "",
+        price: "",
+      },
+      page: 1,
+    };
+  },
+  components: {
+    MyHtml: {
+      props: ["html"],
+      render(createElement) {
+        return createElement("div", {
+          domProps: {
+            innerHTML: this.html,
+          },
+        });
+      },
+    },
+  },
+  mounted() {
+    this.getList()
+    this.$nextTick(() => {
+      this.initScroll();
+    });
+  },
+  methods: {
+    payType(index) {
+
+      console.log(index);
+    },
+    changeColor() {
+
+    },
+    DistrictShow() {
+      this.isDistrictShow = true
+    },
+    render() {
+      const com = Vue.extend({
+        template: eval("`" + this.temp + "`"),
+      });
+      console.log(com);
+      //  return h(com, {});
+    },
+    searchMoney() { //配置价格
+      this.wlwl_parameter_search();
+    },
+    wlwl_parameter_search() {  //查询未来网络产品规格
+      let pamars = {};
+      if (
+        this.productDetail.route_num &&
+        this.productDetail.broadband &&
+        this.productDetail.high_school &&
+        this.productDetail.chaosuan_center
+      ) {
+        pamars.route_num = this.productDetail.route_num,
+          pamars.broadband = this.productDetail.broadband,
+          pamars.high_school = this.productDetail.high_school,
+          pamars.chaosuan_center = this.productDetail.chaosuan_center,
+          pamars.discount = this.productDetail.discount
+      }
+      wlwl_parameter_searchAPI(pamars).then((res) => {
+        if (res.data.route_num) {
+          this.route_numList = res.data.route_num;
+          // this.productDetail.route_num = this.route_numList[0].route_num;
+        }
+        if (res.data.broadband) {
+          this.broadbandList = res.data.broadband;
+        }
+        if (res.data.high_school) {
+          this.schoolList = res.data.high_school;
+        }
+        if (res.data.chaosuan_center) {
+          this.chaosuan_centerList = res.data.chaosuan_center;
+
+        }
+        if (res.data.distance) {
+          this.distanceList = res.data.distance;
+        }
+        if (
+          this.productDetail.route_num &&
+          this.productDetail.broadband &&
+          this.productDetail.high_school &&
+          this.productDetail.chaosuan_center && res.data.distance
+        ) {
+          this.productDetail.distance = res.data.distance;
+          this.productDetail.price = res.data.price;
+          this.productDetail.discount_price = res.data.discount_price;
+        }
+      });
+    },
+    initScroll() {
+      document.querySelector(".app-main").style.overflowY = "hidden";
+      document.querySelector(".productBig").style.height =
+        "calc(100vh - 264px)";
+      document.querySelector(".productBig").style.overflowY = "auto";
+    },
+    load() {
+      this.getList();
+    },
+    searchProduct() {
+      this.getList();
+    },
+
+    getList() {//获取产品列表
+      let pamars = {
+        userid: this.userId,
+        page: this.page,
+      };
+      if (!this.isReset) {
+        if (this.form.product_area != "") {
+          pamars.product_area = this.form.product_area;
+        }
+        if (this.form.ptype != "") {
+          pamars.ptype = this.form.ptype;
+        }
+      } else {
+        delete pamars.product_area;
+        delete pamars.ptype;
+        this.form.product_area = "";
+        this.form.ptype = "";
+      }
+      getDiscontProductSearchAPI(pamars).then((res) => {
+        if (res.status == true) {
+          // this.discountProductList = this.discountProductList.concat(res.data)
+          this.discountProductList = res.data;
+          this.discountProductList.forEach((item) => {
+            if (item.discount) {
+              // let newNumber = item.discount.toString();
+              // // item.discount= parseFloat(newNumber).toFixed(2)
+              // item.discount = Number(newNumber).toFixed(2)
+              let number = item.discount * 10;
+              item.discount = number.toString().split('.');
+              if (item.discount[1]) {
+                item.discount = item.discount[0] + '.' + item.discount[1].substr(0, 2);
+              } else {
+                item.discount = item.discount[0];
+              } // 返回 "123.46"
+
+            }
+
+            if (item.product_area) {
+              this.product_area.push(item.product_area);
+            }
+            if (item.ptype) {
+              this.ptype.push(item.ptype);
+            }
+          });
+
+          for (var i = 0; i < this.product_area.length; i++) {
+            for (var j = i + 1; j < this.product_area.length; j++) {
+              if (this.product_area[i] == this.product_area[j]) {
+                this.product_area.splice(j, 1);
+                j--;
+              }
+            }
+          }
+          for (var i = 0; i < this.ptype.length; i++) {
+            for (var j = i + 1; j < this.ptype.length; j++) {
+              if (this.ptype[i] == this.ptype[j]) {
+                this.ptype.splice(j, 1);
+                j--;
+              }
+            }
+          }
+          this.isReset = false;
+        }
+      });
+    },
+    resetSearch() {//重置
+      this.radio = "";
+      this.isReset = true;
+      this.getList();
+    },
+    keepTwoDecimal(num) {
+      var result = parseFloat(num);
+      if (isNaN(result)) {
+        alert("传递参数错误，请检查！");
+        return false;
+      }
+      result = Math.round(num * 100) / 100;
+      return result;
+    },
+    inShoppingCard(row) { //加入购物车
+      console.log(row);
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.wlwl_parameter_search();
+      });
+      this.productDetail = row;
+      this.isAddShopCard = true;
+      this.title = "请添加";
+      if (row.moban) {
+        this.isShow = true
+        this.isMoban = false
+      }
+    },
+    getDescribeRegions() {//获取产品地域
+      let pamars = {
+        instance_charge_type: '',
+        resource_type: '',
+        accept_language: ''
+      }
+      getDescribeRegionsAPI(pamars).then(res => {
+        console.log(res);
+        this.Asia_China = res.Regions.Region_filter.Asia_China
+        this.Asia_Other = res.Regions.Region_filter.Asia_Other
+        this.Europe_America = res.Regions.Region_filter.Europe_America
+        this.Middle_East = res.Regions.Region_filter.Middle_East
+      })
+    },
+    payFirst(item) { //生成订单
+      console.log(item);
+      if (item.name == "阿里云测试产品") {
+        this.AliVisible = true
+        this.getDescribeRegions()
+      } else {
+        this.dialogVisible = true;
+        this.$nextTick(() => {
+          this.wlwl_parameter_search();
+        });
+        if (item.moban) {
+          this.isShow = true
+        }
+        this.productDetail = item;
+        this.isAddShopCard = false;
+        this.title = "请购买";
+      }
+
+
+    },
+    onSubmit() {//确定购买
+      let pamars = {
+        userid: this.userId,
+        productid: this.productDetail.id,
+        list_price: this.productDetail.price,
+        quantity: this.productDetail.quantity,
+        specific_pattern: this.productDetail.specific_pattern,
+      };
+      if (this.productDetail.discount) {
+        pamars.discount = this.productDetail.discount;
+      }
+      if (this.isShow) {
+        pamars.high_school = this.productDetail.high_school,
+          pamars.chaosuan_center = this.productDetail.chaosuan_center,
+          pamars.route_num = this.productDetail.route_num,
+          pamars.broadband = this.productDetail.broadband,
+          pamars.dist = this.productDetail.distance,
+          pamars.ptype = this.productDetail.ptype,
+          pamars.product_area = this.productDetail.product_area
+        pamars.discount = this.productDetail.discount
+      }
+      this.$refs.payForm.validate((valid) => {
+        if (valid) {
+          addShoppingCartAPI(pamars).then((res) => {
+            if (res.status == true) {
+              this.dialogVisible = false;
+              this.$message({
+                message: "添加购物车成功",
+                type: "success",
+              });
+              this.isShow = false
+              this.$refs.payForm.resetFields();
+            } else {
+              this.isShow = false
+              this.$message({
+                message: res.msg,
+                type: "error",
+              });
+            }
+          });
+        } else {
+          this.$message({
+            message: "请注意填写信息完整",
+            type: "error",
+          });
+        }
+      })
+
+    },
+    handleClose() {
+      this.isShow = false
+      this.dialogVisible = false;
+      let pamars = {
+        userid: this.userId,
+        productid: this.productDetail.id,
+        quantity: this.productDetail.quantity,
+        providerid: this.productDetail.providerid,
+        list_price: this.productDetail.price,
+        amount: this.productDetail.price,
+      };
+      if (this.productDetail.discount_price && this.productDetail.discount) {
+        pamars.discount = this.productDetail.discount;
+        pamars.amount = this.productDetail.discount_price;
+      }
+      this.$refs.payForm.validate((valid) => {
+        // if (valid) {
+        addOrderAPI(pamars).then((res) => {
+          if (res.status == true) {
+            this.$message({
+              message: "成功生成订单",
+              type: "success",
+            });
+            this.isShow = false
+            this.$router.push({ name: "orderDetil", query: { id: res.bz_id } });   // orderDetil点击去这个页面
+            this.dialogVisible = false;
+            this.$refs["payForm"].resetFields(["quantity"]);
+          } else {
+            this.isShow = false
+            this.$message({
+              message: "购买失败",
+              type: "error",
+            });
+          }
+        });
+        // } else {
+        //   this.$message({
+        //     message: "请注意填写信息完整",
+        //     type: "error",
+        //   });
+        // }
+      })
+    },
+    close() {
+      this.isShow = false
+      this.$refs.payForm.resetFields();
+      this.dialogVisible = false;
+    },
+  },
+  // beforeDestroy() {
+  //   document.querySelector(".app-main").style.overflowY = "auto";
+  // }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  // background-color: rgba(240, 241, 244);
+  border: 0;
+}
+.box {
+  height: 100vh;
+  .product {
+    .search {
+      // position: fixed;
+      top: 10%;
+    }
+    .productBig {
+      .productList {
+        // height:calc(100vh-300px);
+
+        margin-top: 5px;
+        padding: 25px;
+        .cardHeader {
+        }
+        .cardBody {
+          font-size: 14px;
+          // font-weight: 600;
+
+          .productDiscription {
+            display: flex;
+            flex-direction: row;
+            line-height: 40px;
+            text-align: center;
+            color: rgb(123, 125, 128);
+
+            .productPrice {
+              color: #f00606;
+              font-size: 26px;
+              font-weight: 600;
+            }
+            .discountPrice {
+              color: #f00606;
+              font-size: 26px;
+              font-weight: 600;
+              margin-right: 10px;
+            }
+            .price {
+              text-decoration: line-through;
+              margin-right: 10px;
+            }
+            .discount {
+              height: 30px;
+              width: 70px;
+              border: 1px solid #ad7777;
+              background-color: #e2dbdb;
+              margin-right: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .aLiDialog {
+    // background-color: rgb(99, 100, 100);
+    overflow-y: scroll;
+    .buy {
+      font-size: 12px;
+      padding-left: 10%;
+      padding-right: 10%;
+      border: 1px solid red;
+      .content {
+        .left {
+          .payType {
+            .payTypeTitle {
+              padding-top: 15px;
+              .payTypeItem {
+                font-weight: 600;
+                .light {
+                  font-size: 12px;
+                }
+              }
+            }
+            .payTypeList {
+              .bigDiv {
+                display: flex;
+                .divSon {
+                  display: flex;
+                  flex-direction: column;
+                  border: 1px solid #cbcbcb;
+                  margin-right: 30px;
+                  padding: 10px;
+                  .divSonItem {
+                    font-weight: 600;
+                    cursor: pointer;
+                  }
+                  .divSonTitle {
+                    color: #787e80;
+                  }
+                }
+              }
+              .attention {
+                display: flex;
+                padding-top: 5px;
+
+                .useKnow {
+                  color: rgb(254, 121, 48);
+                  background-color: rgb(246, 238, 232);
+                  width: 60px;
+                  height: 30px;
+                  line-height: 30px;
+                }
+                .explain {
+                  color: #787e80;
+                  height: 30px;
+                  line-height: 30px;
+                  display: block;
+                }
+              }
+            }
+          }
+          .aere {
+            .aereCol {
+              padding-top: 20px;
+              .aereSpan {
+                font-weight: 600;
+              }
+            }
+            .aereList {
+              margin-top: 5px;
+              .discrption {
+                color: #787e80;
+                padding-top: 3px;
+              }
+              .aereDiv {
+                border: 1px solid #cbcbcb;
+              }
+            }
+            .network {
+              .networkItem {
+              }
+            }
+          }
+        }
+        .right {
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/product/mainPage/index.vue b/f/web-kboss/src/views/product/mainPage/index.vue
index ee21cb8..00444e4 100644
--- a/f/web-kboss/src/views/product/mainPage/index.vue
+++ b/f/web-kboss/src/views/product/mainPage/index.vue
@@ -46,6 +46,7 @@
       <div class="user">
         <div class="userImg">
           <div class="imgUser">{{ userInfo.username.charAt(0) }}</div>
+
         </div>
         <div class="rightBox">
           <ul class="userUl">
@@ -157,6 +158,7 @@ export default Vue.extend({
 .mainBox {
   background: #f6f6f6;
   width: 100%;
+  height: calc(100vh - 80px);
   display: flex;
   justify-content: space-between;
 }
@@ -229,6 +231,7 @@ export default Vue.extend({
   margin-top: 15px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   width: 100%;
   background: white;
   height: 300px;
@@ -255,7 +258,7 @@ export default Vue.extend({
   .userImg {
 
     width: 150px;
-    height: 100%;
+    // height: 150px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -301,9 +304,8 @@ export default Vue.extend({
 }
 
 .imgUser {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  text-align: center;
+  line-height: 80px;
   width: 80px;
   height: 80px;
   border-radius: 50%;