开始公寓详情页面
This commit is contained in:
A1300399510
parent
e0f1eddfe0
commit
0227cf6db2
@ -1,8 +1,6 @@
|
||||
<template>
|
||||
|
||||
<router-view />
|
||||
<login></login>
|
||||
>>>>>>> 542e853 (提交)
|
||||
</template>
|
||||
<script setup>
|
||||
import login from '@/components/public/login.vue'
|
||||
|
||||
BIN
src/assets/img/publicImage/transmit-icon.png
Normal file
BIN
src/assets/img/publicImage/transmit-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -1,9 +1,38 @@
|
||||
<template>
|
||||
<page-top-bar></page-top-bar>
|
||||
|
||||
<div class="content"></div>
|
||||
<div class="content wid1200">
|
||||
<div class="header">
|
||||
<div class="top flexflex">
|
||||
<div class="brand-name flexcenter">ZHELI這裡</div>
|
||||
<div class="brand-abstract">高颜值高品质学生公寓，城理浸公学生首选</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="operate-box flexacenter">
|
||||
<div class="nav-box flexacenter">
|
||||
<div class="nav-item flexcenter" :class="{ 'pitch': item == 1 }" v-for="item in 5">优惠活动</div>
|
||||
</div>
|
||||
<div class="btn-box flexacenter">
|
||||
<div class="btn-item transmit-btn flexcenter">
|
||||
<img class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
|
||||
转发
|
||||
</div>
|
||||
<div class="btn-item consult-btn flexcenter">咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-box flexflex">
|
||||
<div class="details-left flex1">
|
||||
<div class="type-box">
|
||||
<div class="type-item">
|
||||
<div class="type-name">双人套间A</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-right"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -13,4 +42,125 @@ const uniqid = "1qfWOLTPbyPH"
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
height: 100px;
|
||||
background-color: rgb(13, 67, 114);
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
|
||||
.top {
|
||||
width: 1200px;
|
||||
height: 65px;
|
||||
background: -webkit-linear-gradient(356.899508550192deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
|
||||
background: -moz-linear-gradient(93.1004914498078deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
|
||||
background: linear-gradient(93.1004914498078deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 0 30px;
|
||||
|
||||
.brand-name {
|
||||
height: 22px;
|
||||
background-color: rgba(128, 108, 36, 1);
|
||||
border-radius: 8px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
color: #FDDA55;
|
||||
padding: 0 11px;
|
||||
margin-top: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.brand-abstract {
|
||||
color: #806C24;
|
||||
font-size: 14px;
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.operate-box {
|
||||
width: 1200px;
|
||||
height: 70px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
font-size: 14px;
|
||||
padding: 0 30px;
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-box {
|
||||
.nav-item {
|
||||
height: 40px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 8px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
padding: 0 17px;
|
||||
cursor: pointer;
|
||||
|
||||
&.pitch {
|
||||
background-color: #000;
|
||||
font-weight: 650;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
|
||||
.btn-item {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
|
||||
&.transmit-btn {
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
color: #333333;
|
||||
margin-right: 10px;
|
||||
|
||||
.transmit-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.consult-btn {
|
||||
background: -webkit-linear-gradient(324.854454500294deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
|
||||
background: -moz-linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
|
||||
background: linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-box {
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
background-color: #FDDA55;
|
||||
|
||||
.details-left {
|
||||
.type-box {
|
||||
.type-item {
|
||||
height: ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-right {
|
||||
width: 304px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user