ZhangBin
/
datang-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

调整首页样式

master
song 3 years ago
parent
bad7ccca89
commit
73dd8071e8
3 changed files with 16 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/common/portrait.styl
  2. 169
      src/components/Banner/Banner+.vue
  3. 27
      src/views/FirstPages/FirstPage.vue

1
src/common/portrait.styl
View File

@ -566,4 +566,5 @@ h2{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size: 16px
}

169
src/components/Banner/Banner+.vue
View File

@ -1,169 +0,0 @@
<template>
<div class="box">
<div class="examples">
<div class="bannerBox">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in ImgNews" :key="index">
<img :src="item.titleUrl" alt="">
<!-- <div class="rotation-div one-text">
{{ item.title }}
</div> -->
</div>
</div>
</div>
</div>
<div class="bannerIndex">
<span>{{bannerIndex}}</span>/4
</div>
<div class="tips">
<!-- <img src="./imgs/icon_tz.png" alt="" class="tipsImg"> -->
<p>请尽量保证上传的处方文字清晰可见，并保证红框内的信息完整不缺失</p>
</div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/swiper.min.css';
export default {
props: {
ImgNews: {
type: Array,
default: []
}
},
data() {
return {
bannerIndex: 0,
banner: [
{
picture_txt: '手写的处方',
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/NEXw6KmWH5.png',
},
{
picture_txt: '机打的处方',
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/ZdXbcS77SK.png',
},
{
picture_txt: '机打的处方',
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/BKfxNfcHpH.png',
},
{
picture_txt: '机打的处方',
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png'
},
{
picture_txt: '机打的处方',
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png'
}
]
};
},
mounted() {
let that = this;
/* eslint-disable */
let mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', //滑动方向，可设置水平(horizontal)或垂直(vertical)。
loop: true, // 设置为true 则开启loop模式
autoplay: 3000, // 自动切换时间
slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。类型：number or auto
centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
spaceBetween: 10, // 在slide之间设置距离（单位px）。
loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
on: {
slideChangeTransitionEnd: function(){
if(this.activeIndex === 8 || this.activeIndex === 4 ) {
that.bannerIndex = 1;
} else {
that.bannerIndex = this.activeIndex-3;
}
},
},
});
},
};
</script>
<style lang="less" scoped>
.box{
position: relative;
width: 100%;
height: 500px;
}
.examples{
position: absolute;
top: 44px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
// background-color: #f5f0f0;
font-size: 14px;
.tips{
position: absolute;
bottom: 0px;
width: 100%;
height: 46px;
background-color: #b5654d;
text-align: center;
img{
width: 12px;
height: 14px;
position: absolute;
top: 7.5px;
left: 12vw;
color: #fff;
}
p{
width: 240px;
text-align: left;
color: #fff;
font-size: 12px;
position: absolute;
left: 18vw;
top: 7px;
line-height: 16px;
}
}
}
.bannerIndex{
line-height: 40px;
text-align: center;
color: #666666;
font-size: 15px;
text-align: center;
span{
color: #b5654d;
}
}
.bannerBox{
position: relative;
height: 380px;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide {
width: 80% !important;
overflow: hidden;
display: flex;
align-items: center;
}
.swiper-container .swiper-wrapper .swiper-slide img {
width: 100%;
height: 380px;
border-radius: 5px;
}
.swiper-container .swiper-wrapper .swiper-slide-prev,.swiper-container .swiper-wrapper .swiper-slide-next{
height: 340px !important;
margin-top: 20px;
}
.swiper-container .swiper-wrapper .swiper-slide-prev img,.swiper-container .swiper-wrapper .swiper-slide-next img{
width: 100%;
height: 100%;
}
</style>

27
src/views/FirstPages/FirstPage.vue
View File

@ -13,7 +13,7 @@
</div>
<div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0201', '')">更多></div>
</div>
<div class="new-box-content d-flex flex-column justify-space-between pt-4">
<div class="new-box-content d-flex flex-column pt-4">
<div class="d-flex" v-for="newContent in groupNews" :key="newContent.introId">
<div class="content-date">
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
@ -32,7 +32,7 @@
</div>
<div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0202', '')">更多></div>
</div>
<div class="new-box-content d-flex flex-column justify-space-between pt-4">
<div class="new-box-content d-flex flex-column pt-4">
<div class="d-flex" v-for="newContent in provincialNews" :key="newContent.introId">
<div class="content-date">
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
@ -51,7 +51,7 @@
</div>
<div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0203', '')">更多></div>
</div>
<div class="new-box-content d-flex flex-column justify-space-between pt-4">
<div class="new-box-content d-flex flex-column pt-4">
<div class="d-flex" v-for="newContent in companyNews" :key="newContent.introId">
<div class="content-date">
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
@ -98,8 +98,8 @@
更多>
</div>
</div>
<div class="flex-1 flex-column justify-space-between pt-4">
<div v-for="item in specialList" :key="item.introId" class="d-flex justify-space-between">
<div class="flex-1 flex-column pt-4 honor-con">
<div v-for="item in specialList" :key="item.introId" class="d-flex justify-space-between mb-5">
<div class="one-text" style="cursor: pointer;" @click="jumpDetail('news', '0205', item.introId)">{{ item.title }}</div>
<div class="ml-4">{{ $moment(item.publishTime).format('MM/DD') }}</div>
</div>
@ -115,8 +115,8 @@
更多>
</div>
</div>
<div class="flex-1 flex-column justify-space-between pt-4">
<div v-for="item in gloryList" :key="item.introId" class="d-flex justify-space-between">
<div class="flex-1 flex-column pt-4 honor-con">
<div v-for="item in gloryList" :key="item.introId" class="d-flex justify-space-between mb-5">
<div class="one-text" style="cursor: pointer;" @click="jumpDetail('pile', '9902', item.introId)">{{ item.title }}</div>
<div class="ml-4">{{ $moment(item.publishTime).format('MM/DD') }}</div>
</div>
@ -132,8 +132,8 @@
更多>
</div>
</div>
<div class="flex-1 flex-column justify-space-between pt-4">
<div v-for="item in exitList" :key="item.introId" class="d-flex justify-space-between">
<div class="flex-1 flex-column pt-4 honor-con">
<div v-for="item in exitList" :key="item.introId" class="d-flex justify-space-between mb-5">
<div class="one-text" style="cursor: pointer;" @click="jumpDetail('pile', '9903', item.introId)">{{ item.title }}</div>
<div class="ml-4">{{ $moment(item.publishTime).format('MM/DD') }}</div>
</div>
@ -317,9 +317,10 @@ export default {
/* padding: 16px 0 0 0; */
}
.honor-box {
height: 320px;
/* height: 314px; */
/* background-color: #fff; */
}
.honor-title {
height: 46px;
border-bottom: 1px solid rgb(51, 51, 51);
@ -367,6 +368,7 @@ export default {
margin-left: -1940px;
}
}
.one-text-1 {
width: 100%;
height: 48px;
@ -427,7 +429,7 @@ export default {
overflow: hidden;
}
.new-box-content-jj {
font-size: 14px;
font-size: 16px;
margin-left: 16px;
cursor: pointer;
}
@ -438,6 +440,7 @@ export default {
color: #fff;
border-radius: 4px;
padding: 4px;
margin-bottom: 24px;
}
.content-date-day {
height: 50%;
@ -468,7 +471,7 @@ export default {
border-bottom: 1px solid #333;
}
.news-box {
height: 518px;
/* height: 466px; */
}
.news-box > div {
background-color: #fff;

Write Preview
Loading…
Cancel
Save