commit

2026-08-06 19:07:25 +08:00 · 2022-02-15 10:12:49 +08:00
parent 1bee69cefb
commit 166e889b6f
18 changed files with 391 additions and 223 deletions
--- a/buyer/src/components/indexDecorate/ModelFormItem.vue
+++ b/buyer/src/components/indexDecorate/ModelFormItem.vue
@@ -2,13 +2,19 @@
  <div class="model-item" v-if="element && element.key">
    <!-- 轮播图模块，包括个人信息，快捷导航模块 -->
    <template v-if="element.type == 'carousel'">
-      <model-carousel :data="element" class="mb_20 width_1200_auto"></model-carousel>
+      <model-carousel
+        :data="element"
+        class="mb_20 width_1200_auto"
+      ></model-carousel>
    </template>
    <template v-if="element.type == 'carousel1'">
      <model-carousel1 :data="element" class="mb_20"></model-carousel1>
    </template>
    <template v-if="element.type == 'carousel2'">
-      <model-carousel2 :data="element" class="mb_20 width_1200_auto"></model-carousel2>
+      <model-carousel2
+        :data="element"
+        class="mb_20 width_1200_auto"
+      ></model-carousel2>
    </template>
    <!-- 热门广告 -->
    <template v-if="element.type == 'hotAdvert'">
@@ -37,13 +43,16 @@
    </template>
    <!-- 限时秒杀 待完善 -->
    <template v-if="element.type == 'seckill' && element.options.list.length">
-      <seckill :data="element"  class="mb_20 width_1200_auto"></seckill>
+      <seckill :data="element" class="mb_20 width_1200_auto"></seckill>
    </template>
    <!-- 折扣广告 -->
    <template v-if="element.type == 'discountAdvert'">
      <div
        class="discountAdvert"
-        :style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
+        :style="{
+          backgroundImage:
+            'url(' + require('@/assets/images/decorate.png') + ')',
+        }"
      >
        <img
          @click="linkTo(item.url)"
@@ -74,44 +83,53 @@
    </template>
    <!-- 新品排行 -->
    <template v-if="element.type == 'newGoodsSort'">
-      <new-goods-sort :data="element" class="mb_20 width_1200_auto"></new-goods-sort>
+      <new-goods-sort
+        :data="element"
+        class="mb_20 width_1200_auto"
+      ></new-goods-sort>
    </template>
    <!-- 首页广告 -->
    <template v-if="element.type == 'firstAdvert'">
-      <first-page-advert :data="element" class="mb_20 width_1200_auto"></first-page-advert>
+      <first-page-advert
+        :data="element"
+        class="mb_20 width_1200_auto"
+      ></first-page-advert>
    </template>
    <!-- 横幅广告 -->
-    <template  v-if="element.type == 'bannerAdvert'">
-      <div style="width:100%; text-align: center;">
-      <img
-        width="1200"
-        class="hover-pointer mb_20"
-
-        @click="linkTo(element.options.url)"
-        :src="element.options.img"
-        alt=""
-      />
+    <template v-if="element.type == 'bannerAdvert'">
+      <div style="width: 100%; text-align: center">
+        <img
+          width="1200"
+          class="hover-pointer mb_20"
+          @click="linkTo(element.options.url)"
+          :src="element.options.img"
+          alt=""
+        />
      </div>
    </template>
-    <template v-if="element.type == 'notEnough'">
-      <not-enough :data="element" class="mb_20 width_1200_auto"></not-enough>
+    <template v-if="element.type == 'notEnough'"
+        >
+      <not-enough
+        :data="element"
+        class="mb_20 width_1200_auto"
+      ></not-enough>
    </template>
  </div>
 </template>

 <script>
-import ModelCarousel from './modelList/Carousel.vue';
-import ModelCarousel1 from './modelList/Carousel1.vue';
-import ModelCarousel2 from './modelList/Carousel2.vue';
-import FirstPageAdvert from './modelList/FirstPageAdvert.vue';
-import NewGoodsSort from './modelList/NewGoodsSort.vue';
-import Recommend from './modelList/Recommend.vue';
-import NotEnough from './modelList/NotEnough.vue';
-import Seckill from './modelList/Seckill.vue';
+import ModelCarousel from "./modelList/Carousel.vue";
+import ModelCarousel1 from "./modelList/Carousel1.vue";
+import ModelCarousel2 from "./modelList/Carousel2.vue";
+import FirstPageAdvert from "./modelList/FirstPageAdvert.vue";
+import NewGoodsSort from "./modelList/NewGoodsSort.vue";
+import Recommend from "./modelList/Recommend.vue";
+import NotEnough from "./modelList/NotEnough.vue";
+import Seckill from "./modelList/Seckill.vue";

 export default {
-  name: 'modelFormItem',
-  props: ['element', 'select', 'index', 'data'],
+  name: "modelFormItem",
+  props: ["element", "select", "index", "data"],
  components: {
    ModelCarousel,
    ModelCarousel1,
@@ -120,18 +138,17 @@ export default {
    NewGoodsSort,
    FirstPageAdvert,
    NotEnough,
-    Seckill
+    Seckill,
  },
-  data () {
+  data() {
    return {
      showModal: false, // 控制模态框显隐
-      selected: {} // 已选数据
+      selected: {}, // 已选数据
    };
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>
-
 .model-item {
  position: relative;
  margin-bottom: 10px;
@@ -181,7 +198,7 @@ export default {
  }
 }

-.width_1200_auto{
+.width_1200_auto {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
--- a/buyer/src/components/indexDecorate/modelList/Carousel.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel.vue
@@ -23,12 +23,18 @@
        <div class="person-msg">
          <img :src="userInfo.face" v-if="userInfo.face" alt />
          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
-          <div>Hi，{{ userInfo.nickName || `欢迎来到${config.title}` | secrecyMobile }}</div>
+          <div>
+            Hi, {{
+              userInfo.nickName || `欢迎来到${config.title}` | secrecyMobile
+            }}
+          </div>
          <div v-if="userInfo.id">
-            <Button type="error" shape="circle" @click="$router.push('home')">会员中心</Button>
+            <Button class="btns" shape="circle" @click="$router.push('home')"
+              >会员中心</Button
+            >
          </div>
          <div v-else>
-            <Button type="error" @click="$router.push('login')" shape="circle"
+            <Button class="btns" @click="$router.push('login')" shape="circle"
              >请登录</Button
            >
          </div>
@@ -37,8 +43,14 @@
          <div>
            <span>常见问题</span>
            <ul class="article-list">
-              <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
-                {{article.title}}
+              <li
+                class="ellipsis"
+                :alt="article.title"
+                v-for="(article, index) in articleList"
+                :key="index"
+                @click="goArticle(article.id)"
+              >
+                {{ article.title }}
              </li>
            </ul>
          </div>
@@ -49,45 +61,48 @@
 </template>

 <script>
-
-import {articleList} from '@/api/common.js'
-import storage from '@/plugins/storage';
+import { articleList } from "@/api/common.js";
+import storage from "@/plugins/storage";
 export default {
-  name: 'modelCarousel',
-  props: ['data'],
-  data () {
+  name: "modelCarousel",
+  props: ["data"],
+  data() {
    return {
-      config:require('@/config'),
+      config: require("@/config"),
      userInfo: {}, // 用户信息
      articleList: [], // 常见问题
-      params: { // 请求常见问题参数
+      params: {
+        // 请求常见问题参数
        pageNumber: 1,
        pageSize: 5,
-        type: 'ANNOUNCEMENT',
-        sort: 'sort'
-      }
+        type: "ANNOUNCEMENT",
+        sort: "sort",
+      },
    };
  },
  methods: {
-    getArticleList () { // 获取常见问题列表
-      articleList(this.params).then(res => {
+    getArticleList() {
+      // 获取常见问题列表
+      articleList(this.params).then((res) => {
        if (res.success) {
-          this.articleList = res.result.records
+          this.articleList = res.result.records;
        }
-      })
-    },
-    goArticle (id) { // 跳转文章详情
-      let routeUrl = this.$router.resolve({
-        path: '/article',
-        query: {id}
      });
-      window.open(routeUrl.href, '_blank');
-    }
+    },
+    goArticle(id) {
+      // 跳转文章详情
+      let routeUrl = this.$router.resolve({
+        path: "/article",
+        query: { id },
+      });
+      window.open(routeUrl.href, "_blank");
+    },
+  },
+  mounted() {
+    if (storage.getItem("userInfo"))
+      this.userInfo = JSON.parse(storage.getItem("userInfo"));
+    this.getArticleList();
  },
-  mounted () {
-    if (storage.getItem('userInfo')) this.userInfo = JSON.parse(storage.getItem('userInfo'));
-    this.getArticleList()
-  }
 };
 </script>

@@ -98,6 +113,16 @@ export default {
  overflow: hidden;
 }

+.btns {
+  background-color:#363634 ;
+  line-height:30px;
+  color: white !important;
+}
+.btns:hover {
+  background-color: #363634;
+  line-height:32px !important;
+  color: #e5d790 !important;
+}
 /* 导航主体 */
 .nav-body {
  width: 1200px;
@@ -130,12 +155,14 @@ export default {
    flex-direction: column;
    margin: 20px auto;
    button {
-      height: 25px !important;
+      height: 30px !important;
      margin-top: 10px;
+      line-height: 30px;
+      border: none;
    }
    .ivu-btn-default {
-      color: $theme_color;
-      border-color: $theme_color;
+      // color: $theme_color;
+      // border-color: $theme_color;
    }
    img {
      margin-bottom: 10px;
--- a/buyer/src/components/indexDecorate/modelList/NotEnough.vue
+++ b/buyer/src/components/indexDecorate/modelList/NotEnough.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="not-enough">
-    <ul class="nav-bar">
-      <li
-        v-for="(item, index) in conData.options.navList"
-        :class="currentIndex === index ? 'curr' : ''"
-        @click="changeCurr(index)"
-        :key="index"
-      >
-        <p>{{ item.title }}</p>
-        <p>{{ item.desc }}</p>
-      </li>
-    </ul>
+  <div class="not-enough" ref="obtain" id="demo">
+    <Affix :offset-top="62" @on-change="change">
+      <ul class="nav-bar" v-show="topSearchShow">
+        <li
+          v-for="(item, index) in conData.options.navList"
+          :class="currentIndex === index ? 'curr' : ''"
+          @click="changeCurr(index)"
+          :key="index"
+        >
+          <p @click="gotoDemo">{{ item.title }}</p>
+          <p @click="gotoDemo">{{ item.desc }}</p>
+        </li>
+      </ul>
+    </Affix>
    <div class="content" v-if="showContent">
      <div
        v-for="(item, index) in conData.options.list[currentIndex]"
@@ -29,17 +31,26 @@
 </template>
 <script>
 export default {
+  mounted() {
+    window.addEventListener('scroll',this.handleScrollx,true)
+  },
  props: {
    data: {
      type: Object,
-      default: null
-    }
+      default: null,
+    },
  },
-  data () {
+  data() {
    return {
+      screenHeight:document.body.clientHeight,
+      scrollHieght:0,
+      topSearchShow: true, //展示 导航条
+      topIndex: 0, // 当前滚动条位置 （取整）
+      scrollTops: 0,
+      open:'',
      currentIndex: 0, // 当前分类下标
      conData: this.data, // 装修数据
-      showContent: true // 是否展示内容
+      showContent: true, // 是否展示内容
    };
  },
  watch: {
@@ -47,14 +58,40 @@ export default {
      this.conData = val;
    },
    conData: function (val) {
-      this.$emit('content', val);
-    }
+      this.$emit("content", val);
+    },
  },
  methods: {
-    changeCurr (index) { // 选择分类
-      this.currentIndex = index;
+    handleScrollx(){
+      // console.log('滚动高度',window.pageYOffset) // 获取滚动条的高度
+      // console.log(this.$refs.obtain.getBoundingClientRect().top) //获取到距离顶部的距离
+      this.scrollHieght = Number(window.pageYOffset);//获取到距离顶部的距离
+      this.scrollTops = Number(this.$refs.obtain.getBoundingClientRect().top); // 获取到距离顶部的距离
+         this.topSearchShow = true; // 展示图钉
+          if(this.scrollTops < -660){ // 超过隐藏
+            this.topSearchShow = false;
+      }
+    },
+     toguid(path,id){
+      var path =path;
+      var Id = id;
+      localStorage.setItem('toId',Id);
+      this.$router.push(path);
+    },
+    change(status){ //获取是否获取到图钉
+      this.open = status
+    },
+    gotoDemo(){ // 跳转到demo的位置 
+    if(this.open){ // 获取到图钉之后在跳转当前位置
+       document.querySelector("#demo").scrollIntoView(true);
    }
-  }
+      //scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素
+    },
+    changeCurr(index) {
+      // 选择分类
+      this.currentIndex = index;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -63,10 +100,13 @@ export default {
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
-  background-color: #f3f5f7;
+  background-color: #f8f8f8;
  height: 60px;
  align-items: center;
  position: relative;
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
  li {
    padding: 0 30px;
    text-align: center;
@@ -140,5 +180,6 @@ export default {
      }
    }
  }
+
 }
 </style>