正在显示
2 个修改的文件
包含
35 行增加
和
102 行删除
@@ -38,7 +38,7 @@ const navigator = () => {} | @@ -38,7 +38,7 @@ const navigator = () => {} | ||
38 | .left { | 38 | .left { |
39 | position: relative; | 39 | position: relative; |
40 | margin: 40px 40px 0; | 40 | margin: 40px 40px 0; |
41 | - width: 15%; | 41 | + width: 25%; |
42 | background-color: #6170c3; | 42 | background-color: #6170c3; |
43 | color: #fff; | 43 | color: #fff; |
44 | border-radius: 18px; | 44 | border-radius: 18px; |
1 | <script setup> | 1 | <script setup> |
2 | -// import { ref } from 'vue' | ||
3 | -// import Head from '@/components/head.vue' | ||
4 | -// const classList = ref([ | ||
5 | -// {url: '@/static/set.png', name: '形式与政策'}, | ||
6 | -// {url: '@/static/class.jpg', name: '1+X中级认证'}, | ||
7 | -// {url: '@/static/class.jpg', name: '交互动效设置'}, | ||
8 | -// {url: '@/static/class.jpg', name: '融媒体制作与策划'}, | ||
9 | -// {url: '@/static/class.jpg', name: '形式与政策'}, | ||
10 | -// {url: '@/static/class.jpg', name: '1+X中级认证'}, | ||
11 | -// {url: '@/static/class.jpg', name: '交互动效设置'}, | ||
12 | -// {url: '@/static/class.jpg', name: '融媒体制作与策划'}, | ||
13 | - | ||
14 | -// ]) | ||
15 | -// </script> | 2 | +import { ref } from 'vue' |
3 | +const classList = ref([ | ||
4 | + { url: '@/static/set.png', name: '形式与政策' }, | ||
5 | + { url: '@/static/class.jpg', name: '1+X中级认证' }, | ||
6 | + { url: '@/static/class.jpg', name: '交互动效设置' }, | ||
7 | + { url: '@/static/class.jpg', name: '融媒体制作与策划' }, | ||
8 | + { url: '@/static/class.jpg', name: '形式与政策' }, | ||
9 | + { url: '@/static/class.jpg', name: '1+X中级认证' }, | ||
10 | + { url: '@/static/class.jpg', name: '交互动效设置' }, | ||
11 | + { url: '@/static/class.jpg', name: '融媒体制作与策划' } | ||
12 | +]) | ||
13 | +</script> | ||
16 | <template> | 14 | <template> |
17 | <div class="counter"> | 15 | <div class="counter"> |
18 | <div class="box"> | 16 | <div class="box"> |
@@ -20,100 +18,26 @@ | @@ -20,100 +18,26 @@ | ||
20 | <div class="leftt">我的课程</div> | 18 | <div class="leftt">我的课程</div> |
21 | <div class="rightt"> | 19 | <div class="rightt"> |
22 | <div class="noe"> | 20 | <div class="noe"> |
23 | - <div class="pic"> | ||
24 | - <img src="@/static/set.png" alt="">设置 | ||
25 | - </div> | 21 | + <div class="pic"><img src="@/static/set.png" alt="" />设置</div> |
26 | </div> | 22 | </div> |
27 | <div class="noe"> | 23 | <div class="noe"> |
28 | - <div class="pic"> | ||
29 | - <img src="@/static/ewm.png" alt="">二维码 | ||
30 | - </div> | 24 | + <div class="pic"><img src="@/static/ewm.png" alt="" />二维码</div> |
31 | </div> | 25 | </div> |
32 | <div class="noe"> | 26 | <div class="noe"> |
33 | - <div class="pic"> | ||
34 | - <img src="@/static/fx.png" alt="">转发 | ||
35 | - </div> | 27 | + <div class="pic"><img src="@/static/fx.png" alt="" />转发</div> |
36 | </div> | 28 | </div> |
37 | </div> | 29 | </div> |
38 | </div> | 30 | </div> |
39 | <div class="bod"> | 31 | <div class="bod"> |
40 | - <div class="n"> | ||
41 | - +新建课程 | ||
42 | - </div> | ||
43 | - <div class="n"> | ||
44 | - 新建文件夹 | ||
45 | - </div> | 32 | + <div class="n">+新建课程</div> |
33 | + <div class="n">新建文件夹</div> | ||
46 | </div> | 34 | </div> |
47 | - <!-- <div class="ban"> | ||
48 | - <div class="bottom"> | ||
49 | - <div class="pic" v-for="item in classList" :key="item"><img :src="item.url" alt=""></div> | ||
50 | - <div class="li" v-for="item in classList" :key="item">{{ item.name}}</div> | ||
51 | - </div> | ||
52 | - </div> --> | ||
53 | <div class="ban"> | 35 | <div class="ban"> |
54 | - <div class="item"> | ||
55 | - <div class="class"> | ||
56 | - <img src="@/static/class.jpg" alt=""> | ||
57 | - </div> | ||
58 | - <div class="title"> | ||
59 | - 形式与政策 | ||
60 | - </div> | ||
61 | - </div> | ||
62 | - <div class="item"> | 36 | + <div class="item" v-for="item in classList" :key="item"> |
63 | <div class="class"> | 37 | <div class="class"> |
64 | - <img src="@/static/class.jpg" alt=""> | ||
65 | - </div> | ||
66 | - <div class="title"> | ||
67 | - 1+X中级认证 | ||
68 | - </div> | ||
69 | - </div> | ||
70 | - <div class="item"> | ||
71 | - <div class="class"> | ||
72 | - <img src="@/static/class.jpg" alt=""> | ||
73 | - </div> | ||
74 | - <div class="title"> | ||
75 | - 交互动效设计 | ||
76 | - </div> | ||
77 | - </div> | ||
78 | - <div class="item"> | ||
79 | - <div class="class"> | ||
80 | - <img src="@/static/class.jpg" alt=""> | ||
81 | - </div> | ||
82 | - <div class="title"> | ||
83 | - 融媒体制作与策划 | ||
84 | - </div> | ||
85 | - </div> | ||
86 | - <div class="item"> | ||
87 | - <div class="class"> | ||
88 | - <img src="@/static/class.jpg" alt=""> | ||
89 | - </div> | ||
90 | - <div class="title"> | ||
91 | - 形式与政策 | ||
92 | - </div> | ||
93 | - </div> | ||
94 | - <div class="item"> | ||
95 | - <div class="class"> | ||
96 | - <img src="@/static/class.jpg" alt=""> | ||
97 | - </div> | ||
98 | - <div class="title"> | ||
99 | - 1+X中级认证 | ||
100 | - </div> | ||
101 | - </div> | ||
102 | - <div class="item"> | ||
103 | - <div class="class"> | ||
104 | - <img src="@/static/class.jpg" alt=""> | ||
105 | - </div> | ||
106 | - <div class="title" s> | ||
107 | - 交互动效设计 | ||
108 | - </div> | ||
109 | - </div> | ||
110 | - <div class="item"> | ||
111 | - <div class="class"> | ||
112 | - <img src="@/static/class.jpg" alt=""> | ||
113 | - </div> | ||
114 | - <div class="title"> | ||
115 | - 融媒体制作与策划 | 38 | + <img src="@/static/class.jpg" alt="" /> |
116 | </div> | 39 | </div> |
40 | + <div class="title">{{ item.name }}</div> | ||
117 | </div> | 41 | </div> |
118 | </div> | 42 | </div> |
119 | </div> | 43 | </div> |
@@ -133,10 +57,15 @@ | @@ -133,10 +57,15 @@ | ||
133 | flex-wrap: wrap; | 57 | flex-wrap: wrap; |
134 | justify-content: space-around; | 58 | justify-content: space-around; |
135 | margin-top: 20px; | 59 | margin-top: 20px; |
60 | +<<<<<<< HEAD | ||
136 | .item{ | 61 | .item{ |
62 | +======= | ||
63 | + width: 95%; | ||
64 | + .item { | ||
65 | +>>>>>>> c8a1193fe202ec9250f041cfa20fabb4916270ac | ||
137 | margin: 40px; | 66 | margin: 40px; |
138 | } | 67 | } |
139 | - .title{ | 68 | + .title { |
140 | text-align: center; | 69 | text-align: center; |
141 | margin-top: 10px; | 70 | margin-top: 10px; |
142 | } | 71 | } |
@@ -145,8 +74,8 @@ | @@ -145,8 +74,8 @@ | ||
145 | width: 100%; | 74 | width: 100%; |
146 | border-radius: 10px; | 75 | border-radius: 10px; |
147 | } | 76 | } |
148 | - | ||
149 | } | 77 | } |
78 | + | ||
150 | .bod { | 79 | .bod { |
151 | display: flex; | 80 | display: flex; |
152 | margin-top: 30px; | 81 | margin-top: 30px; |
@@ -167,13 +96,17 @@ | @@ -167,13 +96,17 @@ | ||
167 | margin-top: 37px; | 96 | margin-top: 37px; |
168 | display: flex; | 97 | display: flex; |
169 | justify-content: space-between; | 98 | justify-content: space-between; |
170 | - width: 1277px; | 99 | + width: 95%; |
171 | 100 | ||
172 | .leftt { | 101 | .leftt { |
173 | font-weight: 800; | 102 | font-weight: 800; |
174 | } | 103 | } |
104 | +<<<<<<< HEAD | ||
105 | + .bod { | ||
106 | +======= | ||
175 | 107 | ||
176 | .rightt { | 108 | .rightt { |
109 | +>>>>>>> c8a1193fe202ec9250f041cfa20fabb4916270ac | ||
177 | display: flex; | 110 | display: flex; |
178 | 111 | ||
179 | .noe { | 112 | .noe { |
@@ -186,8 +119,8 @@ | @@ -186,8 +119,8 @@ | ||
186 | width: 15px; | 119 | width: 15px; |
187 | height: 15px; | 120 | height: 15px; |
188 | } | 121 | } |
189 | - | ||
190 | } | 122 | } |
191 | } | 123 | } |
192 | } | 124 | } |
193 | - }</style> | ||
125 | +} | ||
126 | +</style> |
-
请 注册 或 登录 后发表评论