|
|
@@ -15,251 +15,25 @@
|
|
|
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
|
|
|
<!-- 引入样式 -->
|
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
+ <link rel="stylesheet" href="css/qjt.css">
|
|
|
<!-- 引入组件库 -->
|
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
<script src="js/echarts.min.js"></script>
|
|
|
-
|
|
|
<style>
|
|
|
- body {
|
|
|
- margin: 0;
|
|
|
- overflow: hidden;
|
|
|
- /* 溢出隐藏 */
|
|
|
- }
|
|
|
-
|
|
|
- #loading {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 45%;
|
|
|
- transform: translate(-50%, 0)
|
|
|
- }
|
|
|
-
|
|
|
- .building-box {
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- width: 120px;
|
|
|
- position: absolute;
|
|
|
- top: -84px;
|
|
|
- left: -58px;
|
|
|
- }
|
|
|
-
|
|
|
- .building-text {
|
|
|
- background: #18A65A;
|
|
|
- color: #fff;
|
|
|
- padding: 4px;
|
|
|
- border-radius: 8px;
|
|
|
- margin-bottom: -8px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
-
|
|
|
- .building-bottom {
|
|
|
- background: #18A65A;
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- border-radius: 5px;
|
|
|
- margin-left: calc(50% - 5px);
|
|
|
- }
|
|
|
-
|
|
|
- .building-line {
|
|
|
- width: 1px;
|
|
|
- height: 40px;
|
|
|
- border-left: 1px dashed #18A65A;
|
|
|
- position: absolute;
|
|
|
- top: -41px;
|
|
|
- left: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .container {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .nowtime {
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- right: 20px;
|
|
|
- font-family: DOUYU;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 17px;
|
|
|
- font-weight: bold;
|
|
|
- color: #1B79CC;
|
|
|
- }
|
|
|
-
|
|
|
- .conList {
|
|
|
- position: absolute;
|
|
|
- width: 35%;
|
|
|
- height: 40%;
|
|
|
- }
|
|
|
-
|
|
|
- .onefloor {
|
|
|
- top: 6%;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .onefloor .list,
|
|
|
- .twofloor .list {
|
|
|
- padding-left: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .twofloor {
|
|
|
- bottom: 10px;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .floortitle {
|
|
|
- max-width: 562px;
|
|
|
- width: 100%;
|
|
|
- max-height: 96px;
|
|
|
- height: 26%;
|
|
|
- background-image: url(images/qjt-titlebg.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-size: 24px;
|
|
|
- color: #FFFFFF;
|
|
|
- display: flex;
|
|
|
- font-style: italic;
|
|
|
- padding-left: 60px;
|
|
|
- box-sizing: border-box;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent {
|
|
|
- width: calc(100% - 40px);
|
|
|
- height: 72%;
|
|
|
- background: #D3EBFF;
|
|
|
- box-shadow: 5px 9px 9px 0px rgba(17, 126, 202, 0.24);
|
|
|
- border-radius: 20px;
|
|
|
- border: 2px solid #D0E0EA;
|
|
|
- font-size: 20px;
|
|
|
- color: #333;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
- margin-left: 40px;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .list {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .top {
|
|
|
- color: #333333;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .bottom {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .bottom img {
|
|
|
- margin: 0 15px;
|
|
|
- }
|
|
|
+ @media screen and (max-width:1600px) {
|
|
|
|
|
|
- .floorcontent .bottom .number {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 40px;
|
|
|
- font-style: italic;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .radio::before {
|
|
|
- content: '';
|
|
|
- display: inline-block;
|
|
|
- width: 9px;
|
|
|
- height: 9px;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .blue .radio::before {
|
|
|
- background-color: rgb(26 149 235 / 50%);
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .blue .bottom {
|
|
|
- color: #1A95EB;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .yellow .radio::before {
|
|
|
- background-color: rgb(255 128 0 / 50%);
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .yellow .bottom {
|
|
|
- color: #FF8000;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .green .radio::before {
|
|
|
- background-color: rgb(35 177 74 / 50%);
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .green .bottom {
|
|
|
- color: #23B14A;
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .purple .radio::before {
|
|
|
- background-color: rgb(137 84 255 / 50%);
|
|
|
- }
|
|
|
-
|
|
|
- .floorcontent .purple .bottom {
|
|
|
- color: #8954FF;
|
|
|
- }
|
|
|
-
|
|
|
- .blsl {
|
|
|
- top: 6%;
|
|
|
- right: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .blsl .list {
|
|
|
- width: 50%;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
- .blsl .list .img {
|
|
|
- width: 40%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .blsl .list .right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .blsl .list .right .number {
|
|
|
- color: #5482F9;
|
|
|
- }
|
|
|
-
|
|
|
- .blsl .list .right .number span:first-child {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 40px;
|
|
|
- font-style: italic;
|
|
|
- }
|
|
|
-
|
|
|
- .pdgdf {
|
|
|
- right: 20px;
|
|
|
- bottom: 5px;
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .pdgdf .text {
|
|
|
- position: absolute;
|
|
|
- top: -80px;
|
|
|
- left: 80px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- font-size: 16px;
|
|
|
- color: #1A95EB;
|
|
|
- }
|
|
|
+ @media screen and (max-width:1300px) {
|
|
|
|
|
|
- .qjttitle {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- height: 74px;
|
|
|
- background-image: url(images/qjttitle.png);
|
|
|
- background-size: 100% 100%;
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -409,7 +183,7 @@
|
|
|
<span style="font-size: 18px;font-weight: bold;margin-bottom: 5px;">地铁6号线</span>
|
|
|
<span>邱家湾站2B出口</span>
|
|
|
<span>距离：800米</span>
|
|
|
- <img src="images/qjtArrow.png" alt="">
|
|
|
+ <img src="images/qjtArrow.png" alt="" style="height: 1.75rem;">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
FinalYu