Skip to content

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

首页部分样式

parent 807b6c00
Show whitespace changes
Inline Side-by-side
Showing with 133 additions and 36 deletions
MP_verify_SQlZoxDI1cfmjZhX.txt 0 → 100755
View file @ e6f3a606
SQlZoxDI1cfmjZhX
\ No newline at end of file
public/css/common.scss
View file @ e6f3a606
...@@ -233,6 +233,7 @@ input.el-input__inner { ...@@ -233,6 +233,7 @@ input.el-input__inner {
.requireContent .companyInfo .rightInfo { .requireContent .companyInfo .rightInfo {
padding-left: 65px; padding-left: 65px;
max-height: 80px;
} }
.requireContent .companyInfo .rightInfo p { .requireContent .companyInfo .rightInfo p {
...@@ -241,6 +242,10 @@ input.el-input__inner { ...@@ -241,6 +242,10 @@ input.el-input__inner {
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
padding-bottom: 6px; padding-bottom: 6px;
width: 180px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
} }
.requireContent .companyInfo .rightInfo span { .requireContent .companyInfo .rightInfo span {
...@@ -249,7 +254,12 @@ input.el-input__inner { ...@@ -249,7 +254,12 @@ input.el-input__inner {
line-height: 19px; line-height: 19px;
color: #9197B4; color: #9197B4;
height: 40px; height: 40px;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-all;
overflow: hidden;
} }
.requireContent img { .requireContent img {
...@@ -261,7 +271,7 @@ input.el-input__inner { ...@@ -261,7 +271,7 @@ input.el-input__inner {
} }
.requireContent .contentInfo p { .requireContent .contentInfo p {
padding: 3px 0; padding: 5px 0;
} }
.requireContent .contentInfo p > span { .requireContent .contentInfo p > span {
......
src/components/index/PageTop.vue
View file @ e6f3a606
<template> <template>
<div :class="[initStyle?'boxWrapper initBoxWrapper':'boxWrapper noinitBoxWrapper',isShow?'':'loginedTopWrapper']"> <div :class="[initStyle?'boxWrapper initBoxWrapper':'boxWrapper noinitBoxWrapper',isOther?'whiteWrapper':'',isShow?'':'loginedTopWrapper']">
<div class="header-left"> <div class="header-left">
<img src="../../assets/img/index/techbook-LOGO-02@2x.png" alt="" v-if="initStyle&&isShow" @click="$router.push('/')"> <img src="../../assets/img/index/techbook-LOGO-02@2x.png" alt="" v-if="initStyle&&isShow" @click="$router.push('/')">
<img src="../../assets/img/index/techbook-LOGO-01@2x.png" alt="" v-if="(!initStyle&&isShow)||!isShow" @click="$router.push('/')"> <img src="../../assets/img/index/techbook-LOGO-01@2x.png" alt="" v-if="(!initStyle&&isShow)||!isShow" @click="$router.push('/')">
...@@ -125,10 +125,16 @@ ...@@ -125,10 +125,16 @@
name: 'PageTop', name: 'PageTop',
props: { props: {
initStyle: { initStyle: {
type: Boolean type: Boolean,
default:true
}, },
isShow:{ isShow:{
type:Boolean type:Boolean,
default:false
},
isOther:{
type:Boolean,
default:false
} }
}, },
data() { data() {
...@@ -167,12 +173,15 @@ ...@@ -167,12 +173,15 @@
methods: { methods: {
handleClick(index) { handleClick(index) {
this.currentIndex = index; this.currentIndex = index;
if((index==1||index==2)&&!this.userInfo) {
this.$router.push('/login');
}
if(index==5) this.$router.push("/aboutwe"); if(index==5) this.$router.push("/aboutwe");
if(index==3) this.$router.push("/lndustryfocus"); if(index==3) this.$router.push("/lndustryfocus");
if(index==0) this.$router.push("/"); if(index==0) this.$router.push("/");
// if(index!=0&&!this.userInfo) { if(index==4) {
// this.$router.push('/login'); console.log(1)
// }else }
if(index==1){ if(index==1){
this.$router.push("/seeprojectlist"); this.$router.push("/seeprojectlist");
}else if(index==2){ }else if(index==2){
...@@ -340,6 +349,9 @@ ...@@ -340,6 +349,9 @@
} }
} }
.whiteWrapper{
background: #fff !important;
}
.initBoxWrapper { .initBoxWrapper {
background-color: transparent; background-color: transparent;
...@@ -367,6 +379,7 @@ ...@@ -367,6 +379,7 @@
.noinitBoxWrapper { .noinitBoxWrapper {
background-color: #fff; background-color: #fff;
box-shadow:0px 1px 5px 0px rgba(0,0,0,0.1);
.header-content li { .header-content li {
color: #3F3F53; color: #3F3F53;
font-weight: bold; font-weight: bold;
...@@ -411,7 +424,6 @@ ...@@ -411,7 +424,6 @@
top: 0; top: 0;
left: 0; left: 0;
padding: 0 40px; padding: 0 40px;
box-shadow:0px 1px 5px 0px rgba(0,0,0,0.1);
} }
.loginedTopWrapper{ .loginedTopWrapper{
......
src/views/index.vue
View file @ e6f3a606
<template> <template>
<div class="page-wrapper"> <div class="page-wrapper">
<page-top :initStyle="isInit" :isShow="isShow" @itemNav="sendItemNav"></page-top> <page-top :initStyle="isInit" :isShow="isShow" :isOther="isOther" @itemNav="sendItemNav"></page-top>
<div class="page-content popper-boundaries"> <div class="page-content popper-boundaries">
<router-view/> <router-view/>
</div> </div>
...@@ -20,37 +20,46 @@ ...@@ -20,37 +20,46 @@
isInit: true, isInit: true,
isShow: false, isShow: false,
indexwe:0, indexwe:0,
isOther:false
} }
}, },
methods: { methods: {
sendItemNav(val){ sendItemNav(val){
this.indexwe = val; this.indexwe = val;
if(val >= 2){ if(val!=0){
this.isInit = false; this.isInit = false;
this.isOther = true;
}else{
this.isInit =true;
} }
}, },
sendbtn(val){ sendbtn(val){
this.indexwe = val; this.indexwe = val;
}, },
handleScroll() { handleScroll() {
if(this.indexwe <= 2){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.isInit = scrollTop > 1 ? false : true; if(this.indexwe==0){
this.isOther = false;
this.isInit = scrollTop > 20 ? false : true;
}else{
this.isOther = true;
this.isInit = false;
} }
}, },
}, },
created(){ created(){
if (this.$route.name != "dashboard") this.isShow = false; if(this.indexwe==0||this.indexwe>2) this.isShow = true;
else this.isShow = true; else this.isShow = false;
}, },
activated(){ activated(){
if (this.$route.name != "dashboard") this.isShow = false; if(this.indexwe==0||this.indexwe>2) this.isShow = true;
else this.isShow = true; else this.isShow = false;
}, },
mounted() { mounted() {
window.addEventListener('scroll', this.handleScroll); window.addEventListener('scroll', this.handleScroll);
if (this.$route.name != "dashboard") this.isShow = false; if(this.indexwe==0||this.indexwe>2) this.isShow = true;
else this.isShow = true; else this.isShow = false;
} }
}; };
</script> </script>
......
src/views/index/pages/index.vue
View file @ e6f3a606
...@@ -10,6 +10,9 @@ ...@@ -10,6 +10,9 @@
</swiper> </swiper>
</div> </div>
<div id="buttonSwiperWrapper">
<swiper :options="buttonSwiperOption" class="swiper-wrap" ref="buttonSwiper">
<swiper-slide>
<div class="bannerCountWrapper"> <div class="bannerCountWrapper">
<h3>{{$t("indexCount.bannerTitle")}}</h3> <h3>{{$t("indexCount.bannerTitle")}}</h3>
<div class="advantage"> <div class="advantage">
...@@ -46,6 +49,16 @@ ...@@ -46,6 +49,16 @@
<el-button class="btnOrange" @click="handleTowork" v-if="userInfo">{{$t("topNav.workPlace")}}</el-button> <el-button class="btnOrange" @click="handleTowork" v-if="userInfo">{{$t("topNav.workPlace")}}</el-button>
</div> </div>
</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>
<div class="broadcastWrapper"> <div class="broadcastWrapper">
<div> <div>
...@@ -72,16 +85,16 @@ ...@@ -72,16 +85,16 @@
<img :src="item.logoUrl?item.logoUrl:require('../../../assets/img/index/bdefaultLogo.png')" alt=""> <img :src="item.logoUrl?item.logoUrl:require('../../../assets/img/index/bdefaultLogo.png')" alt="">
</div> </div>
<div class="rightInfo"> <div class="rightInfo">
<p>{{item.companyName}}</p> <p :title="item.companyName">{{item.companyName}}</p>
<span>{{item.desc}}</span> <span :title="item.desc">{{item.desc}}</span>
</div> </div>
<div class="clearFix"></div> <div class="clearFix"></div>
</div> </div>
<div class="contentInfo"> <div class="contentInfo">
<p><span>{{$t("indexCount.industryInvolved")}}</span><span>{{item.industryBy[0]}}</span></p> <p><span>{{$t("indexCount.industryInvolved")}}</span><span>{{item.industryBy[0]}}</span></p>
<p><span>{{$t("indexCount.canCooperation")}}</span><span><i class="buttonNoBack" :title="item.coopreal[0]">{{item.coopreal[0]}}</i><i class="buttonNoBack" v-if="item.coopreal[1]" :title="item.coopreal[1]">{{item.coopreal[1]}}</i></span></p> <p><span>{{$t("indexCount.canCooperation")}}</span><span style="font-weight: normal;"><i class="buttonNoBack" :title="item.coopreal[0]" style="margin-right: 0;">{{item.coopreal[0]}}</i><i class="buttonNoBack" v-if="item.coopreal[1]" :title="item.coopreal[1]">{{item.coopreal[1]}}</i></span></p>
<p v-if="item.coopreal[2]" style="margin: 0;padding: 0;"><span></span><span style="margin-top: 3px;"><i class="buttonNoBack" v-if="item.coopreal[2]" :title="item.coopreal[2]">{{item.coopreal[2]}}</i></span></p> <p v-if="item.coopreal[2]" style="margin: 0;padding: 0;"><span></span><span style="margin-top: 3px;font-weight: normal;"><i class="buttonNoBack" v-if="item.coopreal[2]" :title="item.coopreal[2]" style="margin-right: 0;">{{item.coopreal[2]}}</i></span></p>
<p><span>{{$t("indexCount.currentRequiredCount")}}</span><span class="blueCount" @click="handleToRequire(item)">{{item.requirementCount}}{{$t("indexCount.unitTiao")}}</span></p> <p style="padding-top: 15px;"><span>{{$t("indexCount.currentRequiredCount")}}</span><span class="blueCount" @click="handleToRequire(item)">{{item.requirementCount}}{{$t("indexCount.unitTiao")}}</span></p>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -194,6 +207,7 @@ ...@@ -194,6 +207,7 @@
notNextTick: true, notNextTick: true,
//循环 //循环
loop: false, loop: false,
loopAdditionalSlides:2,
//设定初始化时slide的索引 //设定初始化时slide的索引
initialSlide: 0, initialSlide: 0,
//自动播放 //自动播放
...@@ -255,13 +269,47 @@ ...@@ -255,13 +269,47 @@
type: "bullets" type: "bullets"
} }
}, },
buttonSwiperOption: {
//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
notNextTick: true,
//循环
loop: true,
//设定初始化时slide的索引
initialSlide: 0,
//自动播放
autoplay: {
delay: 1500,
stopOnLastSlide: false,
/* 触摸滑动后是否继续轮播 */
disableOnInteraction: false
},
//滑动速度
speed: 800,
//滑动方向
direction: "horizontal",
//小手掌抓取滑动
grabCursor: true,
on: {
//滑动之后回调函数
slideChangeTransitionStart: function () {
/* realIndex为滚动到当前的slide索引值 */
},
},
//分页器设置
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets"
}
},
list: [ list: [
{ {
id: 1, id: 1,
image: require('../../../assets/img/index/Bitmap@2x.jpg') image: require('../../../assets/img/index/Bitmap@2x.jpg')
}, { }, {
id: 2, id: 2,
image: require('../../../assets/img/index/Bitmap@2x.jpg') image: require('../../../assets/img/index/banner2.png')
} }
], ],
userInfo:null, userInfo:null,
...@@ -440,6 +488,15 @@ ...@@ -440,6 +488,15 @@
height: 530px; height: 530px;
} }
} }
#buttonSwiperWrapper{
width: 100%;
height: 530px;
position: absolute;
left: 0;
top: 40px;
padding-top: 80px;
z-index: 1;
}
.bannerCountWrapper { .bannerCountWrapper {
display: -webkit-flex;/*新版本语法：chrome 21+*/ display: -webkit-flex;/*新版本语法：chrome 21+*/
...@@ -450,11 +507,6 @@ ...@@ -450,11 +507,6 @@
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
/*height: 530px;*/ /*height: 530px;*/
position: absolute;
left: 0;
top: 40px;
padding-top: 80px;
z-index: 1;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
h3 { h3 {
...@@ -520,8 +572,9 @@ ...@@ -520,8 +572,9 @@
padding-right: 13px; padding-right: 13px;
} }
& > span:nth-child(2) { & > span:nth-child(2) {
padding-right: 114px; padding-right: 50px;
color: #3F3F53; color: #3F3F53;
font-weight: bold;
} }
& > span:last-child { & > span:last-child {
color: #69697A; color: #69697A;
...@@ -536,6 +589,7 @@ ...@@ -536,6 +589,7 @@
height: 508px; height: 508px;
padding: 50px 110px 40px 110px; padding: 50px 110px 40px 110px;
background-color: #ECECF2; background-color: #ECECF2;
& > .buttonWrapper { & > .buttonWrapper {
display: -webkit-flex;/*新版本语法：chrome 21+*/ display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/ display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
...@@ -550,20 +604,30 @@ ...@@ -550,20 +604,30 @@
& .borderBottom40px { & .borderBottom40px {
background-color: #5D78FF; background-color: #5D78FF;
} }
requireContent .contentInfo p{ .requireContent>ul{
display: -webkit-flex; /*新版本语法：chrome 21+*/
display: -webkit-box; /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box; /*老版本语法：Firefox(buggy)*/
display: -ms-flexbox; /*混合版本语法：IE 10*/
display: flex; /*新版本语法:opera 12.1,Firefox 22+*/
justify-content: center;
}
.requireContent .contentInfo p{
display: -webkit-flex;/*新版本语法：chrome 21+*/ display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/ display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/ display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/ display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/ display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
align-items: center;
padding: 7px 0;
} }
.requireContent .contentInfo p > span:first-child { .requireContent .contentInfo p > span:first-child {
width: 40%; width: 40%;
} }
.requireContent .contentInfo p > span:last-child { .requireContent .contentInfo p > span:last-child {
width: 60%; width: 60%;
font-weight: bold;
vertical-align: middle; vertical-align: middle;
font-weight: bold;
} }
...@@ -574,9 +638,9 @@ ...@@ -574,9 +638,9 @@
.buttonNoBack{ .buttonNoBack{
height: 22px; height: 22px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #c8cbe0; border: 1px solid #5D78FF;
color: #69697A; color: #5D78FF;
padding: 3px 7px; padding: 2px 7px;
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
width: 45%; width: 45%;
......
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