昵图网

在这里插入图片描述

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>

vue+elementui+html+css+js昵图网相关推荐

  1. vue+elementUI使用Wavesurfer.js音频可视化

    vue+elementUI使用Wavesurfer.js音频可视化 效果图 安装 wavesurfer.js npm install wavesurfer.js --save (datav安装) np ...

  2. vue+elementUi在点js.js文件中使用Message消息提示、Notification、MessageBox、succes、import、from

    目录 1.方式一 2.方式二 3.总结 1.方式一 引入 import { Message } from "element-ui"; 使用 Message({message: '请 ...

  3. SSH2（后台管理页面+Vue+Element-UI+动态树+分页+正则表达）

    后台搭建-前端展示 1:加入maven項目 1.1创建如图中的工作流程包+配置文件 1.2导入Spring容器框架(业务逻辑处理) 2.Base(接口工具类): 3.SYS模块包: **Util工具类 ...

  4. python+vue+elementUI 高考填报志愿综合参考系统

    功能介绍  将高考填报志愿综合参考系统功能模块主要分为管理员模块.管理员添加专业信息管理.院校信息管理,院校信息管理.专业信息注册管理等操作 语言:Python 框架:django/flask 软件版 ...

  5. Nodejs+vue+elementui网上租车网站 vscode汽车租赁系统

    一开始,本文就对系统内谈到的基本知识,从整体上进行了描述,并在此基础上进行了系统分析.为了能够使本系统较好.较为完善的被设计实现出来,就必须先进行分析调查.基于之前相关的基础,在功能上,对新系统进行了 ...

  6. nodejs+vue+elementui新闻报刊杂志投稿发布和评论系统

    前端功能: 1.用户注册功能 2.用户登录功能.验证码逻辑.忘记密码功能. 3.封装基于axios的ajax功能 4.文件上传功能 系统包含了二个用户,即管理员和用户,管理员权限:首页.个人中心.新闻 ...

  7. nodejs+vue+elementui大学生租房系统 vscode校园房屋租赁系统

    前端技术:nodejs+vue+elementui,  语言 node.js 框架:Express 前端:Vue.js 数据库:mysql  数据库工具:Navicat 开发软件:VScode  二. ...

  8. 【项目相关技术】前端由来、vscode安装使用、ECMAScript 6、Vue、element-ui、Node.js、npm、模块化、WebPack

    前端开发的由来? vscode安装和使用 sda ①.下载地址:[https://code.visualstudio.com/](https://code.visualstudio.com/) sda ...

  9. vue element-ui 优化打包 bundle js 大小

    背景 最近开发的一个项目使用了 vue+ element-ui 的技术栈,当然,还有其他的一些工具库,比如 axios. 说一下我的开发步骤,基础结构是通过 vue-cli@2.x 创建的,手动的加入 ...

最新文章

  1. Linux中把文件夹打成war包,SpringBoot中maven项目打成war包部署在liunx服务器上的方法...
  2. 开源项目：单行日历（CalendarView）
  3. 【设计模式】 桥梁模式
  4. 彻彻底底了解回调函数
  5. 22.敏捷估计与规划——Why Agile Planning Works笔记
  6. python进行usb通讯_Python实现树莓派USB串口通讯
  7. 游戏筑基开发之简单迷宫行走（内附碰撞检测底层逻辑）
  8. 点滴积累【JS】---JQuery实现条形统计图，适用于选择题等统计
  9. Size Classes with Xcode 6
  10. 微软面试题 麻将胡牌算法
  11. tp6加载静态资源文件
  12. matlab字符识别ocr,OCR字符识别 matlab
  13. 《皮囊》中读出的人生哲学
  14. Pytorch和Torch和torchvision的安装
  15. java chmod 777_chmod 777 修改权限
  16. 03-stable diffusion国风小姐姐
  17. win10隐藏任务栏_win10系统任务栏彰显个性的设置方法
  18. 数字逻辑电路(三、集成门电路与触发器)
  19. 等额本金、等额本息工具类(Java版)
  20. Windows 11 版本介绍

热门文章

  1. 视频文件太大？使用FFmpeg来无损压缩它
  2. Tomcat 安装与配置
  3. 如何用u盘装linux 7,U盘安装CentOS 7的方法
  4. Python迷宫生成器
  5. Tsi721和NRS1800连接调试问题记录
  6. mysql cpu 占比过高问题解决
  7. 鸿蒙OS可以装电脑吗,华为的鸿蒙系统可以用在电脑上吗？
  8. 计算机用户名如何保存,电脑的用户名和密码怎么查看
  9. 他励直流电动机matlab,直流他励电机为什么不能直接启动
  10. 直流电机笔记1-串并励电机特性