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 {
.requireContent .companyInfo .rightInfo {
padding-left: 65px;
max-height: 80px;
}
.requireContent .companyInfo .rightInfo p {
......@@ -241,6 +242,10 @@ input.el-input__inner {
font-weight: bold;
cursor: pointer;
padding-bottom: 6px;
width: 180px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.requireContent .companyInfo .rightInfo span {
......@@ -249,7 +254,12 @@ input.el-input__inner {
line-height: 19px;
color: #9197B4;
height: 40px;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-all;
overflow: hidden;
}
.requireContent img {
......@@ -261,7 +271,7 @@ input.el-input__inner {
}
.requireContent .contentInfo p {
padding: 3px 0;
padding: 5px 0;
}
.requireContent .contentInfo p > span {
......
src/components/index/PageTop.vue
View file @ e6f3a606
<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">
<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('/')">
......@@ -125,10 +125,16 @@
name: 'PageTop',
props: {
initStyle: {
type: Boolean
type: Boolean,
default:true
},
isShow:{
type:Boolean
type:Boolean,
default:false
},
isOther:{
type:Boolean,
default:false
}
},
data() {
......@@ -167,12 +173,15 @@
methods: {
handleClick(index) {
this.currentIndex = index;
if((index==1||index==2)&&!this.userInfo) {
this.$router.push('/login');
}
if(index==5) this.$router.push("/aboutwe");
if(index==3) this.$router.push("/lndustryfocus");
if(index==0) this.$router.push("/");
// if(index!=0&&!this.userInfo) {
// this.$router.push('/login');
// }else
if(index==4) {
console.log(1)
}
if(index==1){
this.$router.push("/seeprojectlist");
}else if(index==2){
......@@ -340,6 +349,9 @@
}
}
.whiteWrapper{
background: #fff !important;
}
.initBoxWrapper {
background-color: transparent;
......@@ -367,6 +379,7 @@
.noinitBoxWrapper {
background-color: #fff;
box-shadow:0px 1px 5px 0px rgba(0,0,0,0.1);
.header-content li {
color: #3F3F53;
font-weight: bold;
......@@ -411,7 +424,6 @@
top: 0;
left: 0;
padding: 0 40px;
box-shadow:0px 1px 5px 0px rgba(0,0,0,0.1);
}
.loginedTopWrapper{
......
src/views/index.vue
View file @ e6f3a606
<template>
<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">
<router-view/>
</div>
......@@ -20,37 +20,46 @@
isInit: true,
isShow: false,
indexwe:0,
isOther:false
}
},
methods: {
sendItemNav(val){
this.indexwe = val;
if(val >= 2){
if(val!=0){
this.isInit = false;
this.isOther = true;
}else{
this.isInit =true;
}
},
sendbtn(val){
this.indexwe = val;
},
handleScroll() {
if(this.indexwe <= 2){
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(){
if (this.$route.name != "dashboard") this.isShow = false;
else this.isShow = true;
if(this.indexwe==0||this.indexwe>2) this.isShow = true;
else this.isShow = false;
},
activated(){
if (this.$route.name != "dashboard") this.isShow = false;
else this.isShow = true;
if(this.indexwe==0||this.indexwe>2) this.isShow = true;
else this.isShow = false;
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
if (this.$route.name != "dashboard") this.isShow = false;
else this.isShow = true;
if(this.indexwe==0||this.indexwe>2) this.isShow = true;
else this.isShow = false;
}
};
</script>
......
src/views/index/pages/index.vue
View file @ e6f3a606
......@@ -10,6 +10,9 @@
</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">
......@@ -46,6 +49,16 @@
<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>
<div class="broadcastWrapper">
<div>
......@@ -72,16 +85,16 @@
<img :src="item.logoUrl?item.logoUrl:require('../../../assets/img/index/bdefaultLogo.png')" alt="">
</div>
<div class="rightInfo">
<p>{{item.companyName}}</p>
<span>{{item.desc}}</span>
<p :title="item.companyName">{{item.companyName}}</p>
<span :title="item.desc">{{item.desc}}</span>
</div>
<div class="clearFix"></div>
</div>
<div class="contentInfo">
<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 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><span>{{$t("indexCount.currentRequiredCount")}}</span><span class="blueCount" @click="handleToRequire(item)">{{item.requirementCount}}{{$t("indexCount.unitTiao")}}</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;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 style="padding-top: 15px;"><span>{{$t("indexCount.currentRequiredCount")}}</span><span class="blueCount" @click="handleToRequire(item)">{{item.requirementCount}}{{$t("indexCount.unitTiao")}}</span></p>
</div>
</li>
</ul>
......@@ -194,6 +207,7 @@
notNextTick: true,
//循环
loop: false,
loopAdditionalSlides:2,
//设定初始化时slide的索引
initialSlide: 0,
//自动播放
......@@ -255,13 +269,47 @@
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: [
{
id: 1,
image: require('../../../assets/img/index/Bitmap@2x.jpg')
}, {
id: 2,
image: require('../../../assets/img/index/Bitmap@2x.jpg')
image: require('../../../assets/img/index/banner2.png')
}
],
userInfo:null,
......@@ -440,6 +488,15 @@
height: 530px;
}
}
#buttonSwiperWrapper{
width: 100%;
height: 530px;
position: absolute;
left: 0;
top: 40px;
padding-top: 80px;
z-index: 1;
}
.bannerCountWrapper {
display: -webkit-flex;/*新版本语法：chrome 21+*/
......@@ -450,11 +507,6 @@
flex-wrap: wrap;
width: 100%;
/*height: 530px;*/
position: absolute;
left: 0;
top: 40px;
padding-top: 80px;
z-index: 1;
justify-content: center;
color: #fff;
h3 {
......@@ -520,8 +572,9 @@
padding-right: 13px;
}
& > span:nth-child(2) {
padding-right: 114px;
padding-right: 50px;
color: #3F3F53;
font-weight: bold;
}
& > span:last-child {
color: #69697A;
......@@ -536,6 +589,7 @@
height: 508px;
padding: 50px 110px 40px 110px;
background-color: #ECECF2;
& > .buttonWrapper {
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
......@@ -550,20 +604,30 @@
& .borderBottom40px {
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-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+*/
align-items: center;
padding: 7px 0;
}
.requireContent .contentInfo p > span:first-child {
width: 40%;
}
.requireContent .contentInfo p > span:last-child {
width: 60%;
font-weight: bold;
vertical-align: middle;
font-weight: bold;
}
......@@ -574,9 +638,9 @@
.buttonNoBack{
height: 22px;
border-radius: 3px;
border: 1px solid #c8cbe0;
color: #69697A;
padding: 3px 7px;
border: 1px solid #5D78FF;
color: #5D78FF;
padding: 2px 7px;
font-size: 12px;
font-style: normal;
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