首页轮播图

hailu

2022-09-08 b26184bf06cf067afd099c531124abab274230ca

首页轮播图

 node_modules/.package_versions.json

@@ -1 +1,68 @@
{}
{
  "less-loader": [
    "5.0.0"
  ],
  "vue-infinite-scroll": [
    "2.0.2"
  ],
  "pify": [
    "4.0.1"
  ],
  "clone": [
    "2.1.2"
  ],
  "loader-utils": [
    "1.4.0"
  ],
  "emojis-list": [
    "3.0.0"
  ],
  "big.js": [
    "5.2.2"
  ],
  "json5": [
    "1.0.1"
  ],
  "minimist": [
    "1.2.6"
  ],
  "less": [
    "3.13.1"
  ],
  "errno": [
    "0.1.8"
  ],
  "tslib": [
    "1.14.1"
  ],
  "make-dir": [
    "2.1.0"
  ],
  "graceful-fs": [
    "4.2.10"
  ],
  "mime": [
    "1.6.0"
  ],
  "prr": [
    "1.0.1"
  ],
  "image-size": [
    "0.5.5"
  ],
  "native-request": [
    "1.1.0"
  ],
  "semver": [
    "5.7.1"
  ],
  "source-map": [
    "0.6.1"
  ],
  "copy-anything": [
    "2.0.6"
  ],
  "is-what": [
    "3.14.1"
  ]
}

 src/api/url_analyst.js

@@ -4,7 +4,10 @@
export const getPage = (data)=>{
  return axios.get('/Analyst/GetPage',{params:data})
}

//获取首页轮播图
export const getHomeImg = (data)=>{
  return axios.post('/sys/GetCarouselImg',data)
}
//获取浏览量
export const postReadArticle = (data)=>{
  return axios.post('/Analyst/ReadArticle',data)

 src/views/AboutView.vue

@@ -175,7 +175,7 @@
            />
          </li>
        </ul>
        <div class="request" @click="application()">申请开通免费上账号</div>
        <div class="request" @click="application()">申请开通免费账号</div>
      </section>
    </main>
  </div>

 src/views/HomeView.vue

@@ -6,27 +6,21 @@
    <main>
      <section class="left">
        <a-carousel class="swiper" autoplay>
          <div>
          <div v-for="item in this.imgList" :key=item.Id>
            <img
              :src=item.Url
              alt="" style="height: 500px; width: 100%" />
          </div>
          <!-- <div>
            <img
              src="https://th.bing.com/th/id/R.3d65ceb916e50ab97ea198341fd6e18c?rik=m9nclAHZL4Vb4Q&riu=http%3a%2f%2fwww.ghostw7.com%2fuploadslxy%2fallimg%2f160125%2f1T9132T7-5.jpg&ehk=Dpnr0mb4j8x%2b1kHVSTDsdyJMDwntoS3rlUXla8uBexg%3d&risl=&pid=ImgRaw&r=0"
              alt=""
              style="height: 500px; width: 100%"
            />
              alt="" style="height: 500px; width: 100%" />
          </div>
          <div>
            <img
              src="https://th.bing.com/th/id/R.3d65ceb916e50ab97ea198341fd6e18c?rik=m9nclAHZL4Vb4Q&riu=http%3a%2f%2fwww.ghostw7.com%2fuploadslxy%2fallimg%2f160125%2f1T9132T7-5.jpg&ehk=Dpnr0mb4j8x%2b1kHVSTDsdyJMDwntoS3rlUXla8uBexg%3d&risl=&pid=ImgRaw&r=0"
              alt=""
              style="height: 500px; width: 100%"
            />
          </div>
          <div>
            <img
              src="https://th.bing.com/th/id/R.3d65ceb916e50ab97ea198341fd6e18c?rik=m9nclAHZL4Vb4Q&riu=http%3a%2f%2fwww.ghostw7.com%2fuploadslxy%2fallimg%2f160125%2f1T9132T7-5.jpg&ehk=Dpnr0mb4j8x%2b1kHVSTDsdyJMDwntoS3rlUXla8uBexg%3d&risl=&pid=ImgRaw&r=0"
              alt=""
              style="height: 500px; width: 100%"
            />
          </div>
              alt="" style="height: 500px; width: 100%" />
          </div> -->
        </a-carousel>
      </section>
      <section class="features">
@@ -52,13 +46,7 @@
          <div class="iconSearch">
            <span class="iconfont icon-diqiu"></span>
          </div>
          <input
            type="search"
            name=""
            id=""
            placeholder="支持搜索关键词、公司名、人名、专利号等"
            v-model="keyWord"
          />
          <input type="search" name="" id="" placeholder="支持搜索关键词、公司名、人名、专利号等" v-model="keyWord" />
          <a class="fontSearch" @click="handleSearch">查询</a>
          <a href="" class="moreSearch">
            <div>
@@ -77,9 +65,9 @@
                  <span class="iconfont iconSousuo icon-zhinengsousuo"></span>
                </div>
                <p class="sousuoNav">智能搜索</p>
                <p class="sousuoEng">INTELLIGENT SEARCH</p></a
              ></router-link
            >
                <p class="sousuoEng">INTELLIGENT SEARCH</p>
              </a>
            </router-link>
          </li>
          <li class="sousuoItem white shadow radius4">
            <router-link to="/senior">
@@ -88,10 +76,10 @@
                  <span class="iconfont iconSousuo icon-gaojisousuo"></span>
                </div>
                <p class="sousuoNav">高级搜索</p>
                <p class="sousuoEng">SENIOR SEARCH</p></a
              >
              <!-- <div><a-icon type="menu" /></div> --></router-link
            >
                <p class="sousuoEng">SENIOR SEARCH</p>
              </a>
              <!-- <div><a-icon type="menu" /></div> -->
            </router-link>
          </li>

          <li class="sousuoItem white shadow radius4">
@@ -99,14 +87,12 @@
            <router-link to="/batch">
              <a href="">
                <div>
                  <span
                    class="iconfont iconSousuo icon-xinzengHCshenqing"
                  ></span>
                  <span class="iconfont iconSousuo icon-xinzengHCshenqing"></span>
                </div>
                <p class="sousuoNav">批量搜索</p>
                <p class="sousuoEng">BATCH SEARCH</p></a
              ></router-link
            >
                <p class="sousuoEng">BATCH SEARCH</p>
              </a>
            </router-link>
          </li>
          <!-- <li class="sousuoItem white shadow radius4">
            <router-link to="/law">
@@ -126,9 +112,7 @@
    </main>
    <div class="opened" v-show="openedShow">
      <img src="@/assets/logo.png" alt="" />
      <span class="close" @click="(openedShow = false), (maskShow = false)"
        >X</span
      >
      <span class="close" @click="(openedShow = false), (maskShow = false)">X</span>
      <div class="title">
        <span class="fontColor">您身边的全球专利服务专家</span>
        <p class="fillout">填写信息，开通全功能产品试用</p>
@@ -148,6 +132,7 @@
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import Person from "./PersonalCenter.vue";
import { getHomeImg } from '@/api/url_analyst'
export default {
  //import引入的组件需要注入到components对象中才能使用

@@ -169,7 +154,8 @@
      ScrollHeight: document.documentElement.scrollTop,
      footerheight: 0,
      footerheightTwo: 0,
      keyWord:''
      keyWord: '',
      imgList: []
    };
  },
  //计算属性 类似于data概念
@@ -195,6 +181,19 @@
  },
  //方法集合
  methods: {
    // 获取轮播图图片
    getImg() {
      getHomeImg({}

      ).then(res => {
        console.log(res.Data);
        for (let i = 0; i<res.Data.length; i++) {
          res.Data[i].Url=`http://101.133.134.71:8089/${res.Data[i].Url}`
             this.imgList.push(res.Data[i])
        }
      })
    },

    person() {
      this.$router.push({
        name: "要跳转的页面名",
@@ -205,18 +204,18 @@
        },
      });
    },
    handleSearch(){
    handleSearch() {
      let userName = localStorage.getItem('username')
      if(!userName){
      if (!userName) {
        this.$message.warning('您尚未登录!')
        this.$store.commit('setLoginShow',true)
        this.$store.commit('setMaskShow',true)
        this.$store.commit('setLoginShow', true)
        this.$store.commit('setMaskShow', true)

        return
      }
      if(this.keyWord){
        this.$router.push('/smart?keyWord='+this.keyWord)
      }else{
      if (this.keyWord) {
        this.$router.push('/smart?keyWord=' + this.keyWord)
      } else {
        this.$message.warning('请输入非空的关键词进行智能检索!')
      }
    },
@@ -237,12 +236,13 @@
      this.windowHeightTwo = this.windowHeight + 207 + "px";
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  created() { },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getImg()
    window.addEventListener("scroll", this.handleScroll);
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
@@ -256,11 +256,11 @@
      })();
    };
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
@@ -268,9 +268,11 @@
  color: #333333;
  cursor: pointer;
}

input {
  padding-left: 10px;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}
@@ -282,6 +284,7 @@
    height: 21px;
    line-height: 21px;
  }

  .ConfirmLogin {
    cursor: pointer;
    margin: 10px auto;
@@ -293,11 +296,13 @@
    border-radius: 6px;
    background-color: rgba(239, 130, 1, 1);
    line-height: 50px;

    a {
      color: #ffffff;
    }
  }
}

.home {
  width: 100%;
  min-height: 750px;
@@ -313,11 +318,13 @@
  //   height: var(height);
  // }
}

main {
  width: 95%;
  margin: 20px auto 50px;
  display: flex;
  justify-content: space-around;

  // @media (max-width: 1280px) {
  //   width: 100%;
  //   margin: 100px auto;
@@ -325,12 +332,14 @@
  // }
  .left {
    width: 45%;

    // @media (max-width: 1280px) {
    //   width: 100%;
    // }
    .swiper {
      width: 100%;
      .ant-carousel >>> .slick-slide {

      .ant-carousel>>>.slick-slide {
        width: 100%;
        height: 400px;
        // @media (max-width: 1280px) {
@@ -339,8 +348,10 @@
      }
    }
  }

  .features {
    width: 50%;

    // @media (max-width: 1280px) {
    //   width: 80%;
    //   margin: 20px auto;
@@ -348,6 +359,7 @@
    .logo {
      width: 40%;
      margin: 0px 0 20px 0;

      // @media (max-width: 1280px) {
      //   display: none;
      // }
@@ -355,6 +367,7 @@
        width: 100%;
      }
    }

    .preferential {
      text-align: left;
      width: 100%;
@@ -365,10 +378,12 @@
      font-size: 30px;
      height: 49px;
      line-height: 49px;

      span:nth-child(1) {
        color: #ef8201;
      }
    }

    p {
      text-align: left;
      margin-bottom: 50px;
@@ -381,12 +396,15 @@
      color: #999999;
      margin: 0px 0 15px 0;
    }

    .searchHistory {
      margin: 15px 0 5px;
      display: flex;
      text-align: left;

      .hot {
        color: #c2c2c2;

        span {
          height: 23px;
          line-height: 23px;
@@ -396,17 +414,21 @@
          font-size: 16px;
          color: #333333;
        }

        .icon-Rrl_s_018 {
          color: #c2c2c2;
          font-size: 22px;
        }

        .hotSpan {
          color: #ef8201;
        }
      }

      ul {
        // width: 20%;
        display: flex;

        li {
          height: 30px;
          font-family: "微软雅黑";
@@ -415,16 +437,19 @@
          font-size: 16px;
          line-height: 30px;
          margin: 0 5px;

          a {
            color: #333333;
          }
        }
      }
    }

    .search {
      width: 70%;
      display: flex;
      position: relative;

      .iconSearch {
        width: 50px;
        height: 60px;
@@ -434,11 +459,13 @@
        position: relative;
        left: 0px;
        z-index: 10;

        .icon-diqiu {
          color: #cfcfcf;
          font-size: 24px;
        }
      }

      input {
        width: 100%;
        height: 60px;
@@ -451,10 +478,12 @@
        position: absolute;
        left: 5px;
      }

      input:focus {
        outline-color: #ef8201;
        color: #333333;
      }

      .fontSearch {
        width: 112px;
        height: 60px;
@@ -471,6 +500,7 @@
        position: absolute;
        right: -110px;
      }

      .moreSearch {
        position: absolute;
        top: 10px;
@@ -479,28 +509,34 @@
        height: 62px;
        display: flex;
        color: #333333;

        p {
          margin-bottom: 0px;
          color: #333333;
          margin-top: 0;
        }

        .moreIcon {
          color: #333333;
          height: 62px;
          line-height: 40px;
        }
      }

      .moreSearch:hover p {
        color: #ef8201;
      }

      .moreSearch:hover .moreIcon {
        color: #ef8201;
      }
    }

    .sousuoList {
      margin: 30px 0 100px;
      display: flex;
      justify-content: space-between;

      // @media (max-width: 1280px) {
      //   flex-wrap: wrap;
      // }
@@ -508,6 +544,7 @@
        width: 30%;
        border: 1px solid #ffffff;
        padding: 10px;

        // @media (max-width: 1280px) {
        //   width: 40%;
        //   margin: 20px 0;
@@ -515,11 +552,13 @@
        div {
          width: 100%;
          text-align: center;

          .iconSousuo {
            color: #ef8201;
            font-size: 50px;
          }
        }

        .sousuoNav {
          color: #333333;
          font-size: 18px;
@@ -528,6 +567,7 @@
          width: 100%;
          text-align: center;
        }

        .sousuoEng {
          color: #333333;
          font-size: 14px;
@@ -538,6 +578,7 @@
          margin-bottom: 5px;
        }
      }

      .sousuoItem:hover {
        // background: ;
        border-color: #ef8201;