vue+elementui+html+css+js昵图网

昵图网

在这里插入图片描述

compoment

<template>
<div class="block" >
    <el-carousel  :interval=6000 :autoplay="true" height="482px">
      <el-carousel-item  v-for="(item,index) in arrayList" :key="index">
        <img  ref="img" :src="item.src" alt="图片加载失败">
        <img :src="arrayList[0].src" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import bk_1 from '@/assets/imgs/bk_1.jpg'
import bk_2 from '@/assets/imgs/bk_2.jpg'
import bk_3 from '@/assets/imgs/bk_3.jpg'
export default {
  name: 'ElementRotation',
  data(){
    return{
      arrayList:[
        {id:1,src:bk_1},
        {id:2,src:bk_2},
        {id:1,src:bk_3}
      ]
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>

app

<template>
  <div id="app">
     <div class="head">
       <div class="head_contnt">
         <a  class="head_logo" href="#"></a>
          <div class="title_li">
                <a href=""  style="color: #31ccff;">首页</a>
                <a href="" >设计</a>
                <a href="" >摄影</a>
                <a href="" >多媒体</a>
                <a href="" >原创交易</a>
            </div>
            <div class="title_btn">
                <a href="" class="login_btn">登录</a>
                <a href="" class="reset_btn">注册</a>
            </div>
       </div>
     </div>
    <ElementRotation>
    </ElementRotation>
    <!-- vue+element-ui两张图来回轮播怎么做查不到呜呜呜 -->
    <!-- 搜素 -->
    <div class="serach">
      <div class="search-content">
        <div id="search-in" ref="in" @click="searchcheck($event)">
          <input class="search-text" ref="text" type="text" @blur="searchblur()">
          <div class="search-hint" ref="hint">请输入<b>标题</b>、<b>关键词</b>、<b>作品编号</b>搜索</div>
        </div>
        <input class="search-btn" type="button">
      </div>
    </div>
    <!-- 提示 -->
    <div class="notice-bar">
      <span class="home-notice-ico"></span>
      <ul class="notice-list-box">
        <li>
          <a href="//service.nipic.com/site/notice/251.html" title="2021年国庆节昵图网放假通知">2021年国庆节昵图网放假通知</a>
        </li>
      </ul>
      <span class="notice-list-close">×</span>
    </div>
    <!-- 业务 -->
  <div class="newIndex_layout">
    <div class="newIndex_content">
      <a class="newIndex_hotpic" href="#">
        <img :src="new_1_img" alt="">
        <span class="textItem">美陈</span>
      </a>
      <a class="newIndex_hotpic" href="#">
        <img class="fest-img" :src="new_2_img" alt="">
        <span class="textItem">党建</span>
       </a>
      <a class="newIndex_hotpic" href="#">
        <img :src="new_3_img" alt="">
        <span class="textItem">秋分</span>
      </a>
      <a class="newIndex_hotpic" href="#" style="margin-right: 0px;">
        <img :src="new_4_img" alt="">
        <span class="textItem">2022日历</span>
        <span class="commercialIcon">商用</span>
      </a>
    </div>
    <div class="newIndex_nav">
      <a href="#">星空</a>
      <a href="#">打折促销海报</a>
      <a href="#">美食海报</a>
      <a href="#">旅游海报</a>
      <a href="#">美食插画</a>
      <a href="#">城市剪影</a>
      <a href="#">最新图片</a>
      <a href="#" style="margin-right: 0px;">查看更多>></a>
    </div>
  </div>
  <div class="paddingLay1">
    <div class="layout_width">
      <div class="left-choice-area img_spacing">
        <a class="left-choicePic" href="#">
          <img :src="left_choice_img" alt="">
            <span class="textItem">活动策划书PPT</span>
        </a>
      </div>
    <div class="right-choice-area ">
        <a class="img-spacing right-choicePic" href="#">
         <img :src="right_choice_img_1" alt="">
           <span class="textItem">房地产</span>
        </a>
       <a class="img-spacing right-choicePic" href="#">
         <img :src="right_choice_img_2" alt="">
          <span class="textItem">秋天</span>
        </a>
        <a class="img-spacing right-choicePic" href="#">
          <img  :src="right_choice_img_3" alt="">
          <span class="textItem">中华美食</span>
      </a>
        <a class="img-spacing right-choicePic" href="#">
          <img :src="right_choice_img_4" alt="">
            <span class="textItem">大闸蟹</span>
        </a>
        <a class="img-spacing right-choicePic" href="#">
          <img :src="right_choice_img_5" alt="">
          <span class="textItem">主题婚礼</span>
        </a>
        <a class="img-spacing right-choicePic" href="#">
          <img :src="right_choice_img_6" alt="">
          <span class="textItem">国内旅游</span>
        </a>
        </div>
      <div class="choicePic-nav newIndex_nav">
        <a href="#">工作总结PPT</a>
        <a href="#">邀请函</a>
        <a href="#">黄昏</a>
        <a href="#">道德讲堂</a>
        <a href="#">商务办公</a>
        <a href="#">APP界面设计</a>
        <a href="#">周年庆海报</a>
        <a href="#" style="margin-right: 0px;">查看更多>></a>
      </div>
    </div>
    <!-- 宣传 -->
    </div>  
      <div class="paddingLay">
        <div class="paddingLay-content">
          <div class="propItem-item">
            <p style="font-size: 24px; padding: 2px 0px;">免费素材</p>
            <p class="lineP">海量共享图任你选择</p>
            <a class="Lbtn" href="#">去看看</a>
          </div>
          <div class="propItem-item">
            <p style="font-size: 24px; padding: 2px 0px;">原创精品</p>
            <p class="lineP">千万精品图片满足你的所需</p>
            <a class="Lbtn" href="#">去看看</a>
          </div>
          <div class="propItem-item">
            <p style="font-size: 24px; padding: 2px 0px;">正版图库</p>
            <p class="lineP">正版图片,版权无忧,放心使用</p>
            <a class="Lbtn" href="#">汇图网</a>
            <span class="extensionIcon">推广</span>
          </div>
          <div class="propItem-item">
            <p style="font-size: 24px; padding: 2px 0px;">汇图悬赏</p>
            <p class="lineP">高端定制，量身打造</p>
            <a class="Lbtn" href="#">去看看</a>
            <span class="extensionIcon">推广</span>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="paddingLayBottom">
        <div class="paddingLayContent">
          <div class="paddingLay-layout">
            <div class="footer-area" style="margin-left: 8px; padding-left:0px;">
              <p class="fs16"><b>关于昵图</b></p>
                <div class="fl J_link">
                  <a hidefocus="true" title="关于昵图" href="//service.nipic.com">昵图简介</a>
                  <br>
                  <a hidefocus="true" title="网站声明" href="//service.nipic.com/site/wzsm.html">网站声明</a>
                </div>
                <div class="fl J_link ml35">
                  <a hidefocus="true" title="网站公约" href="//service.nipic.com/site/wzgy.html">网站公约</a>
                  <br>
                  <a href="http://www.huitu.com" title="汇图网" hidefocus="true">汇图网</a><br>
                </div>
                <div class="fl J_link ml35">
                  <a hidefocus="true" title="版权声明" href="//service.nipic.com/site/copy.html">版权声明</a>
                  <br>
                  <a hidefocus="true" title="友情链接" href="//service.nipic.com/site/yqlj.html">友情链接</a>
                </div>
              </div>
              <div class="footer-area">
                <p class="fs16"><b>常见问题</b></p>
                <div class="fl J_link">
                  <a hidefocus="true" title="注册" href="//login.nipic.com/reg">注册</a>/<a hidefocus="true" title="登录" href="//login.nipic.com">登录</a><br>
                  <a hidefocus="true" title="关于共享分" href="//service.nipic.com/site/help_gxfen.html">关于共享分</a><br>
                </div>
                <div class="fl J_link ml35">
                  <a hidefocus="true" title="如何上传" href="//service.nipic.com/site/help_add.html">如何上传</a><br>
                  <a hidefocus="true" title="关于VIP特权" href="//service.nipic.com/site/vip.html">关于VIP特权</a>
                </div>
                <div class="fl J_link ml35">
                  <a hidefocus="true" title="上传事项" href="//service.nipic.com/site/zpsc.html">上传事项</a><br>
                  <a hidefocus="true" title="关于账户金额" href="//service.nipic.com/site/help_nibi.html">关于账户金额</a>
                </div>
              </div>
              <div class="footer-area">
                <p class="fs16"><b>联系我们</b></p>
                <p class="mt20 fs14"><span class="font-tahoma">QQ在线时间 08:30-21:30</span></p>
                <p class="mt12"><a href="//service.nipic.com/site/contact.html" title="qq交谈" rel="nofollow" hidefocus="true" class="qq-consult"></a></p>
              </div>
              <div class="footer-area">
                <p class="fs16"><b>友情链接</b></p>
                <p style="margin-top:26px">
                  <a logo_type="realname">
                    <img height="40" width="170" alt="招商银行" ondragstart="return false;" :src="bank_img">
                   </a>
                </p>
              </div>
              <div class="footer-area" style="border: none;">
                <div class="fav-nipic-boxV2"></div>
              </div>
            </div>
                
            <div class="nipic-footerV2">
              <div class="fs12">
                <p class="gray mt10"><span class="font-tahoma">Copyright © 2021 NiPic.com All Rights Reserved</span>　版权所有·昵图网  昵图网是网络服务平台方，若您的权利被侵害，请联系 <span class="font-tahoma">copyright@nipic.com</span> 本站法律顾问：陈明律师</p>
                <p class="gray mt10"><a href="http://beian.miit.gov.cn/" target="_blank">浙ICP备14012994号-1  增值电信业务经营许可证：浙B2-20140130</a> 违法和不良信息举报电话：0571-89267010</p>
                <div style="width:395px;margin:0 auto; padding:20px 0;">
                  <a target="_blank" href="" style="display:inline-block;text-decoration:none;height:29px;line-height:29px;margin-right:22px">
                  <img src="https://static.ntimg.cn/original/images/webgongshang_icon.png" style="float:left;">
                  <p style="float:left;height:29px;line-height:29px;margin: 0px 0px 0px 5px; color:#939393;">网络工商电子营业执照</p>
                  </a>
                  <a target="_blank" href="" style="display:inline-block;text-decoration:none;height:29px;line-height:29px;">
                  <img src="https://static.ntimg.cn/original/images/gongan_icon.png" style="float:left;">
                  <p style="float:left;height:29px;line-height:29px;margin: 0px 0px 0px 5px; color:#939393;">浙公网安备 33011002011092号</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      <!--定制  -->
      <div class="feedback" ref="decorate">
          <a class="to-huitu" href="#">
          <img :src="to_huitu_img" alt="">
          <span>定制</span>
          </a>
          <a class="goTop" @mouseover="toBorder()" @mouseleave="outBorder()" href="#" >
          <div ref="bk"></div>
          <span ref="text">顶部</span>
          </a>
        </div>
  </div>
      
      
  
</template>

<script>
import ElementRotation from './components/ElementRotation'
import new_1 from './assets/imgs/new_1.jpg'
import new_2 from './assets/imgs/new_2.jpg'
import new_3 from './assets/imgs/new_3.jpg'
import new_4 from './assets/imgs/new_4.jpg'
import left_choice from './assets/imgs/left_choice.jpg'
import right_choice_1 from './assets/imgs/right_choice_1.jpg'
import right_choice_2 from './assets/imgs/right_choice_2.jpg'
import right_choice_3 from './assets/imgs/right_choice_3.jpg'
import right_choice_4 from './assets/imgs/right_choice_4.jpg'
import right_choice_5 from './assets/imgs/right_choice_5.jpg'
import right_choice_6 from './assets/imgs/right_choice_6.jpg'
import bank from './assets/imgs/招商银行.png'
import to_huitu from './assets/imgs/定制.png'
export default {
  name: 'App',
  data(){
    return{
      new_1_img: new_1,
      new_2_img: new_2,
      new_3_img: new_3,
      new_4_img: new_4,
      left_choice_img: left_choice,
      right_choice_img_1: right_choice_1,
      right_choice_img_2: right_choice_2,
      right_choice_img_3: right_choice_3,
      right_choice_img_4: right_choice_4,
      right_choice_img_5: right_choice_5,
      right_choice_img_6: right_choice_6,
      bank_img: bank,
      to_huitu_img:to_huitu
    }
  },
  components: {
    ElementRotation
  },
  methods:{
    toBorder:function(){
      this.$refs.bk.style.display="none";
      this.$refs.text.style.display="block";
    },
    outBorder:function(){
      this.$refs.bk.style.display="block";
      this.$refs.text.style.display="none";
    },
    scrollListener:function(){
       var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
       if(scrollTop<728){
         this.$refs.decorate.style.display='none';
       }else{
         this.$refs.decorate.style.display='block';
       }
    },
    searchcheck:function(event){
      this.$refs.in.style.opacity=1;
      this.$refs.text.focus();
      this.$refs.hint.style.display='none';
    },
    searchblur:function(){
      this.$refs.in.style.opacity=0.9;
      this.$refs.hint.style.display='block';
    }
  },
  mounted(){
    window.addEventListener("scroll",this.scrollListener,true);
  },
  destroyed(){
    window.removeEventListener("scroll",this.scrollListener,true);
  }
  
}
</script>

<style>

#app {
  font-family: 'Microsoft yahei',arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
/* 头部设计 */
*{
  margin: 0px;
  padding: 0px;
}
a{
    text-decoration: none;
    color: #000;
}
ol,ul{
    list-style: none;
}
.head{
  width: 100%;
  height: 75px;
  box-shadow:-3px 15px 8px -19px #000;
  background-color: #fff;
}
.head_contnt{
  width: 1260px;
  margin-left: auto;
  margin-right: auto;
}
.head_logo{
  float: left;
  width: 149px;
  height: 45px;
  margin-top: 15px;
  margin-right: 70px;
  background: url(https://static.ntimg.cn/original/images/soso.png) no-repeat -208px 0px;
}
.title_li{
  float: left;
}
.title_li a{
    line-height: 75px;
    margin-right: 28px;
    font-size: 16px;
}
.title_li a:hover{
    color: #31ccff;
}
.title_btn{
    float: right;
    text-align: center;
    font-size: 0;
}
.title_btn a:hover{
    background-color: #31ccff;
    color: #fff;
}
.login_btn{
  display: inline-block;
    width: 80px;
    height: 38px;
    margin: 20px 10px 0 0;
    line-height: 38px;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    background-color: #1ebcf0;
    box-sizing: border-box;
}
.reset_btn{
    display: inline-block;
    width: 80px;
    height: 38px;
    margin-top: 20px;
    line-height: 38px;
    font-size: 16px;
    border: 1px solid #31ccff;
    border-radius: 3px;
    box-sizing: border-box;
}
/* 左边箭头 */
.el-carousel__arrow{
  border-radius: 0%;
}
.el-icon-arrow-left{
  display: none;
}
.el-carousel__arrow--left{
  left: 50px;
  width: 60px;
  height: 60px;
  background: url(	https://static.ntimg.cn/original/images/arr-l.png);
}
/* 右边箭头 */
.el-icon-arrow-right{
  display: none;
}
.el-carousel__arrow--right{
  right: 50px;
  width: 60px;
  height: 60px;
  background: url(https://static.ntimg.cn/original/images/arr-r.png);
}
/* 线条 */
.el-carousel__button{
  width: 35px;
  height: 4px;
  border-radius: 4px;
}
/* .el-carousel__indicators .el-carousel__button  {
  
} */
/* 搜素 */
.search-content{
    position: absolute;
    padding: 4px 1px 4px 4px;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 50px;
    width: 687px;
    background-color: rgba(0,0,0,.15);
    overflow: hidden;
    z-index: 3;
}
#search-in{
    opacity: 0.9;
}
.search-text{
    float: left;
    vertical-align: top;
    padding-left: 16px;
    width: 570px;
    font-size: 14px;
    line-height: 50px;
    border: none;
    outline: none;
}
.search-hint{
    position: absolute;
    top: 18px;
    left: 25px;
    z-index: 10;
    color: #999;
    font-size: 14px;
}
.search-in:checked>.search-hint{
    display: none;
}
.search-btn{
    cursor: pointer;
    width: 97px;
    height: 50px;
    border-radius: 3px;
    border: none;
    background: url(https://static.ntimg.cn/original/images/newIndex-searchBtn.png?v=20171127) no-repeat;
}
/* 提示 */
.notice-bar{
  height: 28px;
  border: 1px solid #fed9bf;
  background-color: #fff9f3;
  line-height: 28px;
  margin-top: 15px;
  width: 1260px;
  margin: auto;
  font-size: 14px;
  margin-top: 50px;
}
.home-notice-ico {
    float: left;
    margin: 9px 13px 0 10px;
    width: 14px;
    height: 11px;
    background: url(https://static.ntimg.cn/original/images/home_notice_ico.jpg) no-repeat left top;
}
.notice-list-box {
    width: 800px;
    float: left;
    height: 28px;
    overflow: hidden;
}
.notice-list-close {
    float: right;
    color: #dc137b;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-right: 10px;
}
/* 中间 */
.newIndex_layout{
    margin: auto;
    width: 1260px;
    overflow: hidden;
    padding: 50px 0 50px 0;
}
.newIndex_content{
    position: relative;
    margin: auto;
    width: 1260px;
    font-size: 0px;
}
.newIndex_hotpic{
    display: inline-block;
    margin-right: 33px;
}
.textItem{
    display: none;
    position: absolute;
    bottom: 0px;
    width: 290px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
}
.newIndex-hotpic:nth-child(4n)>.commercialIcon {
    display: block;
}
.commercialIcon{
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 241px;
  width: 50px;
  height: 24px;
  color: white;
  background-color: rgba(0,0,0,0.5);
  font-size: 14px;
  line-height: 24px;
}
.newIndex_hotpic:hover .textItem{
    display: block;
}
.newIndex_nav{
    margin: 40px auto 0;
    width: 1260px;
    font-size: 0px;
}
.newIndex_nav a{
    display: inline-block;
    margin-right: 20px;
    padding: 5px 8px;
    width: 122px;
    height: 36px;
    text-align: center;
    font-size: 14px;
    line-height: 36px;
    border: 1px solid #dfdfdf;
    background-color: #fff;
}
.newIndex_nav a:hover{
    color: #31ccff;
}
/* contnt */
.paddingLay1{
    margin: auto;
    width: 1260px;
    padding: 50px 0;
    background-color: #f6f6f6; 
    font-size: 0px;
}
/* 左边 */
.img-spacing{
    margin-right: 33px;
}
.img-spacing:nth-child(n+4){
    margin-top: 20px;
}
.img-spacing:nth-child(3n){
    margin-right: 0px;
}
.left-choice-area{
    position: relative;
    display: inline;
}
.left-choice-area:hover .textItem{
    display: block;
}
/* 右边 */
.right-choice-area{
    width: 936px;
    height: 420px;
    float: right;
}
.right-choice-area a{
    position: relative;
    display: inline-block;
}
.right-choicePic:hover span{
    display: block;
}
.choicePic-nav{
    margin-top: 40px;
}
/* 宣传 */
.paddingLay{
    padding: 50px 0;
    font-size: 0px;
}
.paddingLay-content{
    margin: auto;
    padding: 30px 0;
    width: 1260px;
    border: 1px solid #dfdfdf;
}
.propItem-item{
    position: relative;
    display: inline-block;
    width: 314px;
    text-align: center;
    border-right: 1px solid #dfdfdf;
}
.propItem-item:nth-child(n+4){
    border-right: none;
}
.lineP{
    font-size: 14px;
    color: #999;
    margin-top: 10px;
}
.Lbtn{
    display: block;
    margin: 15px auto 0px;
    width: 145px;
    height: 40px;
    font-size: 14px;
    line-height: 42px;
    text-align: center;
    border: 1px solid #1ebcf0;
    border-radius: 4px;
    color: #1ebcf0;
}
.Lbtn:hover{
    background-color: #31ccff;
    color: #fff;
}
.extensionIcon{
    color: #fff;
    font-size: 12px;
    display: block;
    position: absolute;
    background-color: #ff2e2e;
    padding: 1px 5px;
    left: 208px;
    border-radius: 2px;
    top: 0;
}
/*paddingLayBottom */
.paddingLayBottom{
    margin: auto;
    margin-top: 40px;
    padding: 36px 0 20px;
    border-top: 1px solid #ccc;
    background-color: #f6f6f6; 
}
.paddingLayContent{
    margin: auto;
    width: 1260px;
}
.paddingLay-layout{
    overflow: hidden;
}
.footer-area{
    position: relative;
    float: left;
    display: inline-block;
    width: auto;
    height: 118px;
    border-right: 1px solid #dfdfdf;
    padding: 14px 35px 0;
}
.paddingLay-layout a{
    color: #333;
    font-size: 14px;
    line-height: 28px;
}
.paddingLay-layout a:hover{
    color: #1ebcf0;
}
.fl{
    display: inline-block;
    margin-top: 20px;
}
.qq-consult {
    display: inline-block;
    height: 33px;
    width: 108px;
    background: url(https://static.ntimg.cn/original/images/qq1.png) no-repeat 0 0;
}
.fs12 {
    font-size: 12px;
}
.fs16 {
    font-size: 16px;
}
.fs14 {
    font-size: 14px;
}
.font-tahoma {
    font-family: tahoma;
}
.mt20 {
    margin-top: 20px;
}
.mt12 {
    margin-top: 12px;
}
.fav-nipic-boxV2{
    position: absolute;
    top: 14px;
    left: 35px;
    width: 90px;
    height: 99px;
    background: url(~@/assets/imgs/weixin_icon.png) no-repeat 0 0;
}
.nipic-footerV2{
    padding-top: 25px;
    text-align: center;
}
.mt10 {
    margin-top: 10px;
}
.gray {
    color: #666;
}
.feedback{
    position: fixed;
    bottom: 30%;
    right: 4%;
    width: 48px;
    height: 107px;
    background-color: #e4e7ea;
    border: 1px solid #c6cdd8;
}
.to-huitu{
    display: block;
    margin-top: 7px;
    padding-bottom: 5px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #c6cdd8;
}
.to-huitu:hover{
    color: #1ebcf0;
}
.goTop{
    display: block;
    width: 48px;
    height: 48px;
}

.goTop div{
    display: block;
    width: 48px;
    height: 48px;
    background-image: url(https://static.ntimg.cn/original/images/bg_png8.png?v=20170510);
    background-position: 0 -71px;
    background-repeat: no-repeat;
}
.goTop span{
    display: none;
    text-align: center;
    font-size: 12px;
    line-height: 48px;
}
</style>