| | |
|---|
| | | |
|---|
| | | /*滑动卡片start*/ |
|---|
| | | .hoverCard { |
|---|
| | | width: 160px; |
|---|
| | | width: 140px; |
|---|
| | | height: 224px; |
|---|
| | | border-radius: 20px; |
|---|
| | | background: #f5f5f5; |
|---|
| | |
|---|
| | | |
|---|
| | | .hoverCard .card-button { |
|---|
| | | transform: translate(-50%, 125%); |
|---|
| | | width: 50%; |
|---|
| | | width: 60%; |
|---|
| | | border-radius: 1rem; |
|---|
| | | border: none; |
|---|
| | | background-color: #008bf8; |
|---|
| | |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" style="display: flex;justify-content: space-between;margin-top: 50px;flex-wrap: nowrap; scale: 0.9" @click="bgClick()"> |
|---|
| | | <div style="flex: 4;" :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}"> |
|---|
| | | <div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: nowrap; scale: 0.9" @click="bgClick()"> |
|---|
| | | <div style="flex: 3;" :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}"> |
|---|
| | | <div> |
|---|
| | | <div class="pointContainer" v-for="(x,index) in map" :key="index"> |
|---|
| | | <div v-if="index != 0 && (index != map.length-1)" v-for="(y,idx) in x" :key="idx"> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="padding: 20px;flex: 1;margin-top: -70px; "> |
|---|
| | | <div style="padding: 20px;flex: 1;margin-top: -70px;"> |
|---|
| | | <el-slider v-model="showScale" :marks="showScaleMarks"></el-slider> |
|---|
| | | <div style="display: flex;justify-content: space-between;flex-wrap: wrap;"> |
|---|
| | | <div class="hoverCard" style="width: 100%;"> |
|---|
