|
@@ -1,63 +1,57 @@
|
|
|
<template>
|
|
|
<div class="aside">
|
|
|
-
|
|
|
<ul class="tabul" v-if="currentItem.idstar == 'star1'">
|
|
|
- <li @click="handleStar('star1_1')" :class="active=='star1_1'?'active brightness':''">
|
|
|
+ <li @click="handleStar('star1_1')" :class="active == 'star1_1' ? 'active brightness' : ''">
|
|
|
解放军总医院
|
|
|
</li>
|
|
|
- <li @click="handleStar('star1_2')" :class="active=='star1_2'?'active brightness':''">
|
|
|
+ <li @click="handleStar('star1_2')" :class="active == 'star1_2' ? 'active brightness' : ''">
|
|
|
第一医学中心
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<div class="asidecon brightness">
|
|
|
+ <div class="img" v-if="currentItem.thumb">
|
|
|
+ <img :src="currentItem.thumb" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="atitle">
|
|
|
- <p class="qtitle">{{currentItem.name}}</p>
|
|
|
+ <p class="qtitle">{{ currentItem.name }}</p>
|
|
|
<div class="qline">
|
|
|
<img :src="require(`@/assets/images/icon/star.png`)" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="img" v-if="currentItem.thumb">
|
|
|
- <img :src="currentItem.thumb" alt="" />
|
|
|
- </div>
|
|
|
-
|
|
|
<div class="desc">
|
|
|
- <p>介绍:</p>
|
|
|
<p v-html="currentItem.description"></p>
|
|
|
</div>
|
|
|
|
|
|
- <div class="intro" v-if="currentItem.urls&¤tItem.urls[0].urlName.trim()&¤tItem.urls[0].url.trim()" @click="open(currentItem.urls[0])">
|
|
|
- <span>{{currentItem.urls[0].urlName}}</span>
|
|
|
- <img :src="require(`@/assets/images/project/enter.png`)" alt="">
|
|
|
+ <div class="intro" v-if="currentItem.urls && currentItem.urls[0].urlName.trim() && currentItem.urls[0].url.trim()" @click="open(currentItem.urls[0])">
|
|
|
+ <span>{{ currentItem.urls[0].urlName }}</span>
|
|
|
+ <img :src="require(`@/assets/images/project/enter.png`)" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="btn" @click="$emit('close'),active='star1_1'">
|
|
|
- <div class="btncon brightness">
|
|
|
- <div class="inside"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="shadow" :class="{shorts:currentItem.idstar == 'star1'}"></div>
|
|
|
+ <img @click="$emit('close'), (active = 'star1_1')" class="close" :src="require('@/assets/images/project/cancel.png')" alt="" />
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- props:['currentItem'],
|
|
|
- data(){
|
|
|
+ props: ["currentItem"],
|
|
|
+ data() {
|
|
|
return {
|
|
|
- active: 'star1_1'
|
|
|
- }
|
|
|
+ active: "star1_1",
|
|
|
+ };
|
|
|
},
|
|
|
methods: {
|
|
|
- handleStar(data){
|
|
|
- this.active = data
|
|
|
- this.$emit('switch',data)
|
|
|
+ handleStar(data) {
|
|
|
+ this.active = data;
|
|
|
+ this.$emit("switch", data);
|
|
|
},
|
|
|
open(item) {
|
|
|
let windowObjectReference = window.open();
|
|
|
- let temp = this.changetohttp(item.url)
|
|
|
+ let temp = this.changetohttp(item.url);
|
|
|
windowObjectReference.location.href = temp;
|
|
|
// window.open(item.url,'_blank')
|
|
|
},
|
|
@@ -66,100 +60,67 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+@w: 895px;
|
|
|
.aside {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
- right: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- width: 606px;
|
|
|
- transition: 0.5s ease all;
|
|
|
+ transition: 0.3s ease all;
|
|
|
+ z-index: 999;
|
|
|
color: #fff;
|
|
|
- .tabul{
|
|
|
+ .tabul {
|
|
|
position: absolute;
|
|
|
- left: -70px;
|
|
|
- width: 70px;
|
|
|
+ bottom: 74px;
|
|
|
+ right: 50px;
|
|
|
font-size: 0;
|
|
|
- >li{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- writing-mode: vertical-lr;
|
|
|
+ z-index: 99999;
|
|
|
+
|
|
|
+ > li {
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 150px;
|
|
|
+ height: 55px;
|
|
|
+ line-height: 55px;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
- letter-spacing: 2px;
|
|
|
- padding: 20px 0;
|
|
|
+ padding: 0 20px;
|
|
|
cursor: pointer;
|
|
|
- font-size: 20px;
|
|
|
- &:not(&.active){
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(165, 177, 236, 0.7) 0%,
|
|
|
- rgba(134, 145, 199, 0.7) 100%
|
|
|
- );
|
|
|
- transform: translateX(4%);
|
|
|
- width: 90%;
|
|
|
- }
|
|
|
- &.active{
|
|
|
- width: 100%;
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(165, 177, 236, 0.7) 0%,
|
|
|
- rgba(134, 145, 199, 0.7) 100%
|
|
|
- );
|
|
|
- clip-path: inset(0px round 10px 0 0 10px);
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 -2px 5px rgba(165, 177, 236, 0.7);
|
|
|
- &::after{
|
|
|
- display: inline-block;
|
|
|
- content: '';
|
|
|
- width: 98%;
|
|
|
- height: 98%;
|
|
|
- position: absolute;
|
|
|
- bottom: 0%;
|
|
|
- left: 0%;
|
|
|
- z-index: 100;
|
|
|
- filter: blur(3px);
|
|
|
- background: none;
|
|
|
- border-radius: 10px 0px 0px 10px;
|
|
|
- box-shadow: -2px -4px 0px rgba(255, 255, 255, 1);
|
|
|
- }
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 0 10px;
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ color: #fff;
|
|
|
+ &.active {
|
|
|
+ background: rgba(78, 86, 144, 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.asidecon {
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(165, 177, 236, 0.7) 0%,
|
|
|
- rgba(134, 145, 199, 0.7) 100%
|
|
|
- );
|
|
|
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 55%, 8% 50%, 0 45%);
|
|
|
+ // background: linear-gradient(180deg, rgba(165, 177, 236, 0.7) 0%, rgba(134, 145, 199, 0.7) 100%);
|
|
|
width: 100%;
|
|
|
+ // clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
|
|
height: 100%;
|
|
|
padding: 62px 78px;
|
|
|
.atitle {
|
|
|
- width: 100%;
|
|
|
- margin: 0 auto;
|
|
|
+ margin: 45px auto 0;
|
|
|
+ width: @w;
|
|
|
+
|
|
|
.qtitle {
|
|
|
width: 100%;
|
|
|
- height: 30px;
|
|
|
- font-size: 30px;
|
|
|
+ height: 24px;
|
|
|
+ font-size: 24px;
|
|
|
display: inline-block;
|
|
|
font-weight: bold;
|
|
|
line-height: 38px;
|
|
|
text-align: center;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
.qline {
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
margin: 26px 0;
|
|
|
position: relative;
|
|
|
- background: linear-gradient(
|
|
|
- 90deg,
|
|
|
- rgba(255, 255, 255, 0) 0%,
|
|
|
- #ffffff 48%,
|
|
|
- rgba(255, 255, 255, 0) 100%
|
|
|
- );
|
|
|
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 48%, rgba(255, 255, 255, 0) 100%);
|
|
|
> img {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
@@ -169,54 +130,49 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .img{
|
|
|
- width: 450px;
|
|
|
+ .img {
|
|
|
+ width: 880px;
|
|
|
margin: 20px auto;
|
|
|
position: relative;
|
|
|
- min-height: 260px;
|
|
|
- max-height: 400px;
|
|
|
+ min-height: 460px;
|
|
|
+ max-height: 500px;
|
|
|
overflow: hidden;
|
|
|
- >img{
|
|
|
+ > img {
|
|
|
width: 100%;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
}
|
|
|
- .desc{
|
|
|
- color: #fff;
|
|
|
+ .desc {
|
|
|
text-align: justify;
|
|
|
- >p{
|
|
|
+ width: @w;
|
|
|
+ margin: 0 auto;
|
|
|
+ > p {
|
|
|
line-height: 1.8;
|
|
|
font-size: 20px;
|
|
|
- max-height: 20vh;
|
|
|
+ max-height: 10vh;
|
|
|
overflow-y: auto;
|
|
|
padding-right: 10px;
|
|
|
- &:first-of-type{
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- margin: 20px auto;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .intro{
|
|
|
+ .intro {
|
|
|
margin: 30px auto 0;
|
|
|
background: rgba(65, 74, 199, 0.4);
|
|
|
height: 66px;
|
|
|
line-height: 66px;
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
- padding: 0 74px;
|
|
|
-
|
|
|
+ padding: 0 90px;
|
|
|
cursor: pointer;
|
|
|
- >span{
|
|
|
+ > span {
|
|
|
font-size: 24px;
|
|
|
width: 100%;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
- >img{
|
|
|
+ > img {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
@@ -224,83 +180,15 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .btn {
|
|
|
- width: calc(8% - 12px);
|
|
|
- height: calc(10% - 24px);
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- left: 0;
|
|
|
- .btncon {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(165, 177, 236, 0.7) 0%,
|
|
|
- rgba(134, 145, 199, 0.7) 100%
|
|
|
- );
|
|
|
- clip-path: polygon(0 0, 100% 50%, 0 100%);
|
|
|
- cursor: pointer;
|
|
|
- .inside {
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- clip-path: polygon(
|
|
|
- 0 0,
|
|
|
- 100% 0,
|
|
|
- 100% 100%,
|
|
|
- 0 100%,
|
|
|
- 0 86%,
|
|
|
- 72% 50%,
|
|
|
- 0 14%
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- &::before {
|
|
|
- position: absolute;
|
|
|
- width: 2px;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- content: "";
|
|
|
- right: 0;
|
|
|
- display: inline-block;
|
|
|
- top: 0;
|
|
|
- box-shadow: -3px 0 2px rgba(173, 165, 243, 0.6);
|
|
|
- }
|
|
|
- }
|
|
|
- .shadow {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 2px;
|
|
|
- height: 45%;
|
|
|
- box-shadow: -3px 0 2px rgba(173, 165, 243, 0.6);
|
|
|
- &::before {
|
|
|
- position: absolute;
|
|
|
- width: 2px;
|
|
|
- height: 100%;
|
|
|
- right: 0;
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- bottom: 122%;
|
|
|
- box-shadow: -3px 0 2px rgba(173, 165, 243, 0.6);
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .shorts{
|
|
|
- &::before {
|
|
|
- position: absolute;
|
|
|
- width: 2px;
|
|
|
- height: 16%;
|
|
|
- right: 0;
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- bottom: 122%;
|
|
|
- box-shadow: -3px 0 2px rgba(173, 165, 243, 0.6);
|
|
|
- }
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ top: 45px;
|
|
|
+ right: 50px;
|
|
|
+ width: 54px;
|
|
|
+ height: 54px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 9999999;
|
|
|
}
|
|
|
}
|
|
|
</style>
|