252 lines
9.2 KiB
Vue
252 lines
9.2 KiB
Vue
<template>
|
||
<div class="popup-mask flexcenter">
|
||
<div class="box flexflex">
|
||
<div class="tba-list flexcenter">
|
||
<div class="tab-item pitch flexcenter">
|
||
我的收藏
|
||
<div class="value">12</div>
|
||
</div>
|
||
|
||
<div class="tab-item flexcenter">
|
||
我的面经
|
||
<div class="value">12</div>
|
||
</div>
|
||
</div>
|
||
<div class="empty-box flexcenter" v-if="false"><Empty></Empty></div>
|
||
<div class="content">
|
||
<div class="item flexflex" v-for="(item, index) in 10" :key="index">
|
||
<div class="left flexflex">
|
||
<div class="name">香港理工大学</div>
|
||
<div class="info-box flexflex">
|
||
<div class="info-item flexacenter" v-for="item in 2" :key="item">
|
||
<div class="info-item-name">专业</div>
|
||
<div class="info-item-value">Electrical and Electronics Engineering</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-box flexacenter">
|
||
我是本专业+跨专业申请，中大是直接给了推研所。没啥经验分享，主要是港大和港科的面经…
|
||
</div>
|
||
</div>
|
||
<div class="operate-area flexacenter">
|
||
<!-- <img class="delete-icon" src="@/assets/img/delete-icon.svg" /> -->
|
||
<div class="anonymous-box flexacenter">
|
||
<div class="text">公开</div>
|
||
<img class="arrow-icon" src="@/assets/img/arrow-gray.svg" />
|
||
<div class="state-popup flexflex" v-if="false">
|
||
<div class="state-popup-item flexacenter flex1 pitch">
|
||
<div class="">公开发表</div>
|
||
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
|
||
</div>
|
||
<div class="state-popup-item flexacenter flex1">
|
||
<div class="">匿名发表</div>
|
||
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup></script>
|
||
<style lang="less" scoped>
|
||
.popup-mask {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
max-width: none;
|
||
max-height: none;
|
||
border: none;
|
||
outline: none;
|
||
.box {
|
||
width: 750px;
|
||
height: 606px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border-radius: 10px;
|
||
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
|
||
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
|
||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
|
||
flex-direction: column;
|
||
padding: 30px 30px 46px;
|
||
|
||
.tba-list {
|
||
font-size: 16px;
|
||
margin-bottom: 29px;
|
||
.tab-item {
|
||
color: #aaaaaa;
|
||
padding: 0 22px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
|
||
&:first-of-type::after {
|
||
content: "";
|
||
width: 1px;
|
||
height: 16px;
|
||
background: #d7d7d7;
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
.value {
|
||
margin-left: 10px;
|
||
}
|
||
&.pitch {
|
||
font-weight: 650;
|
||
color: #000000;
|
||
.value {
|
||
color: #555;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border: 1px solid rgba(235, 235, 235, 1);
|
||
border-radius: 6px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
// background: #000000;
|
||
overflow: auto;
|
||
padding-right: 10px;
|
||
padding-bottom: 20px;
|
||
.item {
|
||
// flex-direction: column;
|
||
border-bottom: 1px dotted #ebebeb;
|
||
padding-bottom: 20px;
|
||
cursor: pointer;
|
||
margin-left: 22px;
|
||
margin-bottom: 21px;
|
||
.left {
|
||
flex-direction: column;
|
||
// padding-left: 22px;
|
||
position: relative;
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 4px;
|
||
left: -22px;
|
||
width: 5px;
|
||
height: 12px;
|
||
background-color: rgba(49, 215, 46, 1);
|
||
border-radius: 25px;
|
||
}
|
||
.name {
|
||
font-weight: 650;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
margin-bottom: 10px;
|
||
}
|
||
.info-box {
|
||
flex-direction: column;
|
||
margin-bottom: 7px;
|
||
|
||
.info-item {
|
||
line-height: 24px;
|
||
&:not(:last-of-type) {
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.info-item-name {
|
||
color: #7f7f7f;
|
||
font-size: 13px;
|
||
margin-right: 12px;
|
||
}
|
||
.info-item-value {
|
||
font-size: 13px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.text-box {
|
||
width: 580px;
|
||
height: 45px;
|
||
background-color: rgba(246, 246, 246, 1);
|
||
border-radius: 5px;
|
||
color: #000000;
|
||
font-size: 13px;
|
||
padding: 0 16px;
|
||
}
|
||
}
|
||
.operate-area {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
.delete-icon {
|
||
width: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.anonymous-box {
|
||
.text {
|
||
font-size: 13px;
|
||
color: #333333;
|
||
}
|
||
.arrow-icon {
|
||
width: 8px;
|
||
height: 5px;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
position: relative;
|
||
|
||
.state-popup {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 0;
|
||
width: 140px;
|
||
height: 101px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border-radius: 10px;
|
||
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
|
||
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
|
||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
|
||
flex-direction: column;
|
||
|
||
.state-popup-item {
|
||
justify-content: space-between;
|
||
color: #555;
|
||
font-size: 14px;
|
||
padding: 0 10px;
|
||
|
||
&:hover {
|
||
color: #000000;
|
||
}
|
||
|
||
&.pitch {
|
||
color: #72db86;
|
||
.state-popup-icon {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
&:not(:last-of-type) {
|
||
border-bottom: 1px dotted #e3e3e3;
|
||
}
|
||
|
||
.state-popup-icon {
|
||
width: 11px;
|
||
height: 8px;
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|