作者 XJF

s

@@ -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>