Skip to content

T
techbook
Commit 0ee1d69d authored by zhangyanni's avatar zhangyanni
Browse files
Options

首页样式

parent fdea521b
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 59 deletions
src/components/index/PageTop.vue
View file @ 0ee1d69d
......@@ -24,7 +24,7 @@
<span class="right-search" v-if="userInfo&&!isShow"><el-input size="small" style="width: 307px;border-radius: 100px;" placeholder="输入项目名称/企业名称/技术关键词" v-model="keyword"></el-input><i class="iconfont icon-iconsearch" @click="handleSearchDetail(keyword)"></i></span>
<span v-if="!userInfo" class="loginRegister"><i @click="handleLogin">{{$t("topNav.login")}}/</i><i @click="handleRegister">{{$t("topNav.register")}}</i></span>
<span v-if="userInfo" class="user-info hoverSpan" @click="handleOpen">{{userInfo.empName?userInfo.empName:userInfo.empAccount}}</span>
<span class="roleSpan">
<span class="roleSpan" v-if="!isShow">
<span style="margin-right: 5px;" v-if="userInfo&&userInfo.empType!=2&&userInfo.authenticationState==2">
<img src="../../assets/img/vipIcon@2x.png" alt="">
</span>
......@@ -42,7 +42,7 @@
<i style="background: #5D78FF;border-radius: 3px;" v-if="userInfo&&userInfo.roleList[0].roleType==1"><img
src="../../assets/img/adminIcon@2x.png" alt=""></i>
</span>
<span style="margin: 0;margin-top: -2px;" v-if="userInfo">|</span>
<span style="margin: 0;margin-top: -2px;" v-if="userInfo&&!isShow">|</span>
<span @click="changeLangEvent()" class="langHoverSpan"><i :class="lang==='zh-CN'?'selectedLang':''">中文</i><i> / </i><i
:class="lang==='en'?'selectedLang':''">En</i></span>
</div>
......
src/views/index/pages/index.vue
View file @ 0ee1d69d
<template>
<div class="contentWrapper">
<div id="bannerWrapper">
<swiper :options="swiperOption" class="swiper-wrap" ref="mySwiper" v-if="list.length!=0">
<swiper :options="swiperOption" class="swiper-wrap" ref="mySwiper" v-if="list.length!=0" @click="handleToFocus" style="cursor: pointer">
<swiper-slide v-for="(item,index) in list" :key="index">
<div class="imgSwiper" :style="{background:index==0?'unset':'#072074'}">
<img :src="item.image" alt="" :style="{width:index==0?'100%':'auto'}"/>
<img :src="item.image" alt=""/>
</div>
</swiper-slide>
<!-- 常见的小圆点 -->
......@@ -12,54 +12,43 @@
</swiper>
</div>
<div id="buttonSwiperWrapper">
<swiper :options="buttonSwiperOption" class="swiper-wrap" ref="buttonSwiper">
<swiper-slide>
<div class="bannerCountWrapper">
<h3>{{$t("indexCount.bannerTitle")}}</h3>
<div class="advantage">
<span>{{$t("indexCount.bannerSmallTitle")}}</span>
</div>
<ul class="countUl">
<li @click="handleToRoute(1)">
<p>
<countToCmpt :endVal="countData.projectCount"></countToCmpt>
</p>
<p>{{$t("indexCount.projectCount")}}</p>
</li>
<li @click="handleToRoute(2)">
<p>
<countToCmpt :endVal="countData.businessCount"></countToCmpt>
</p>
<p>{{$t("indexCount.businessCount")}}</p>
</li>
<li style="cursor: default">
<p>
<countToCmpt :endVal="countData.requirementCount"></countToCmpt>
</p>
<p>{{$t("indexCount.requireCount")}}</p>
</li>
<li style="cursor: default">
<p>
<countToCmpt :endVal="countData.matchedCount"></countToCmpt>
</p>
<p>{{$t("indexCount.matchCount")}}</p>
</li>
</ul>
<div class="buttonWrapper">
<el-button class="btnOrange" @click="handleRegister" v-if="!userInfo">{{$t("indexCount.registerTitle")}}</el-button>
<el-button class="btnOrange" @click="handleTowork" v-if="userInfo">{{$t("topNav.workPlace")}}</el-button>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="bannerCountWrapper">
<div class="buttonWrapper" style="margin-top: 280px;">
<el-button class="btnOrange" @click="$router.push('/lndustryfocus')">{{$t("topNav.professionfocusing")}}</el-button>
</div>
</div>
</swiper-slide>
</swiper>
<div id="buttonSwiperWrapper" v-show="realSwiperIndex==0">
<div class="bannerCountWrapper">
<h3>{{$t("indexCount.bannerTitle")}}</h3>
<div class="advantage">
<span>{{$t("indexCount.bannerSmallTitle")}}</span>
</div>
<ul class="countUl">
<li @click="handleToRoute(1)">
<p>
<countToCmpt :endVal="countData.projectCount"></countToCmpt>
</p>
<p>{{$t("indexCount.projectCount")}}</p>
</li>
<li @click="handleToRoute(2)">
<p>
<countToCmpt :endVal="countData.businessCount"></countToCmpt>
</p>
<p>{{$t("indexCount.businessCount")}}</p>
</li>
<li style="cursor: default">
<p>
<countToCmpt :endVal="countData.requirementCount"></countToCmpt>
</p>
<p>{{$t("indexCount.requireCount")}}</p>
</li>
<li style="cursor: default">
<p>
<countToCmpt :endVal="countData.matchedCount"></countToCmpt>
</p>
<p>{{$t("indexCount.matchCount")}}</p>
</li>
</ul>
<div class="buttonWrapper">
<el-button class="btnOrange" @click="handleRegister" v-if="!userInfo">{{$t("indexCount.registerTitle")}}</el-button>
<el-button class="btnOrange" @click="handleTowork" v-if="userInfo">{{$t("topNav.workPlace")}}</el-button>
</div>
</div>
</div>
<div class="broadcastWrapper">
......@@ -183,6 +172,7 @@
const that = this;
return {
isInit: true,
realSwiperIndex:0,
activeInfoSwiperOption: {
//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
notNextTick: true,
......@@ -221,12 +211,12 @@
//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
notNextTick: true,
//循环
loop: true,
loop: false,
//设定初始化时slide的索引
initialSlide: 0,
initialSlide: 1,
//自动播放
autoplay: {
delay: 1500,
delay: 6000,
stopOnLastSlide: false,
/* 触摸滑动后是否继续轮播 */
disableOnInteraction: false
......@@ -240,6 +230,7 @@
on: {
//滑动之后回调函数
slideChangeTransitionStart: function () {
that.realSwiperIndex = this.realIndex;
/* realIndex为滚动到当前的slide索引值 */
},
},
......@@ -284,7 +275,7 @@
image: require('../../../assets/img/index/Bitmap@2x.jpg')
}, {
id: 2,
image: require('../../../assets/img/index/banner2.png')
image: require('../../../assets/img/index/bannerchinese.jpg')
}
],
userInfo:null,
......@@ -418,6 +409,13 @@
},
//行业聚焦
handleToFocus(){
if(this.realSwiperIndex==1){
this.$router.push("/lndustryfocuschild")
}
},
//查看更多
handleMore(data){
if(data==1) this.$router.push("/bigBusiness/list");
......@@ -451,6 +449,7 @@
this.getActiveInfoData();
this.getProjectInfoData();
this.getBusinessInfoData();
console.log(this.$refs.mySwiper)
// this.getCaseData();
}
}
......@@ -473,6 +472,10 @@
top: 40px;
padding-top: 80px;
z-index: 1;
-webkit-animation: fadeInOut 3s;
-moz-animation: fadeInOut 3s;
-ms-animation: fadeInOut 3s;
-o-animation: fadeInOut 3s;
}
.bannerCountWrapper {
......@@ -633,9 +636,9 @@
.scientifiCreateWrapper {
height: 776px;
padding: 50px 110px 50px 110px;
padding: 50px 0 50px 0;
background: url("../../../assets/img/index/Bitmap(6).jpg") no-repeat;
background-size: 100% auto;
background-size: cover;
& h4 {
color: #fff;
}
......@@ -664,7 +667,7 @@
display: -moz-box; /*老版本语法：Firefox(buggy)*/
display: -ms-flexbox; /*混合版本语法：IE 10*/
display: flex; /*新版本语法:opera 12.1,Firefox 22+*/
/*justify-content: center;*/
justify-content: center;
flex-wrap: wrap;
li{
margin: 7px;
......@@ -764,4 +767,53 @@
}
}
}
//动画淡入淡出
@-webkit-keyframes fadeInOut {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-moz-keyframes fadeInOut {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-ms-keyframes fadeInOut {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-o-keyframes fadeInOut {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeInOut {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment