|
|
@@ -1,13 +1,32 @@
|
|
|
- <head>
|
|
|
- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
|
|
|
-
|
|
|
<style>
|
|
|
-.kuai {
|
|
|
- height: 20px;
|
|
|
- background-color: aqua;
|
|
|
-}
|
|
|
+ .kuai {
|
|
|
+ height: 400px;
|
|
|
+ width: 350px;
|
|
|
+ display:flex;
|
|
|
+ flex-direction:column;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ /* width: 30%; */
|
|
|
+ /* flex-grow: 0.3; */
|
|
|
+ height: 30%;
|
|
|
+
|
|
|
+ display:flex;
|
|
|
+ flex-direction:row;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .column {
|
|
|
+ width: 48%;
|
|
|
+ /* flex-grow: 0.48; */
|
|
|
+ background-color: rgb(198, 195, 22);
|
|
|
+ font-size: 5em;
|
|
|
+ display:flex;
|
|
|
+ flex-direction:row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
</style>
|
|
|
-</head>
|
|
|
+
|
|
|
|
|
|
# 需求描述
|
|
|
|
|
|
@@ -60,7 +79,7 @@ create index INDEX_TIME
|
|
|
/
|
|
|
|
|
|
```
|
|
|
-<div id="app" class="kuai" @click="devclick()" ></div>
|
|
|
+
|
|
|
|
|
|
# 实现逻辑
|
|
|
|
|
|
@@ -70,18 +89,23 @@ create index INDEX_TIME
|
|
|
>
|
|
|
> 若当前地区在当前时间无推荐位则无推荐位显示
|
|
|
>
|
|
|
-> 若多个金融机构按照广告位置 `2 x n`的方式显示 若最后一行为
|
|
|
-> 一个则居中显示
|
|
|
+> 若多个金融机构按照广告位置 `2 x n`的方式显示 若最后一为一个则居中显示
|
|
|
+>
|
|
|
+><div class="kuai" >
|
|
|
+> <div class="row">
|
|
|
+> <div class="column"><span>A</span></div>
|
|
|
+> <div class="column"><span>B</span></div>
|
|
|
+> </div>
|
|
|
+> <div class="row">
|
|
|
+> <div class="column"><span>C</span></div>
|
|
|
+> <div class="column"><span>D</span></div>
|
|
|
+> </div>
|
|
|
+> <div class="row">
|
|
|
+> <div class="column"><span>E</span></div>
|
|
|
+> </div>
|
|
|
+></div>
|
|
|
+>
|
|
|
+> 若同一位置有多个金融机构 则任取一个展示
|
|
|
+
|
|
|
|
|
|
|
|
|
->
|
|
|
- <script>
|
|
|
- new Vue({
|
|
|
- el:'#app',
|
|
|
- methods: {
|
|
|
- devclick(){
|
|
|
- alert("123")
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- </script>
|
