姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

作者 XJF
提交 3e5d5216b28e56acb0e67860d5f90a9b74d7f9b3 2 个父辈 8c8b75e9 c8a1193f

s

内嵌 并排对比
正在显示 2 个修改的文件 包含 70 行增加 和 137 行删除
@@ -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">  
63 - <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"> 36 + <div class="item" v-for="item in classList" :key="item">
103 <div class="class"> 37 <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,61 +57,70 @@ @@ -133,61 +57,70 @@
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 }
143 img { 72 img {
144 - height: 125px;  
145 - width: 100%;  
146 - border-radius: 10px;  
147 - }  
148 - 73 + height: 125px;
  74 + width: 100%;
  75 + border-radius: 10px;
149 } 76 }
150 - .bod {  
151 - display: flex;  
152 - margin-top: 30px; 77 + }
153 78
154 - .n {  
155 - font-size: 8px;  
156 - border-radius: 15px;  
157 - padding: 3px 10px;  
158 - height: 20px;  
159 - line-height: 20px;  
160 - background-color: white;  
161 - border: #189eff 1px solid;  
162 - margin-right: 25px;  
163 - }  
164 - } 79 + .bod {
  80 + display: flex;
  81 + margin-top: 30px;
165 82
166 - .hed {  
167 - margin-top: 37px;  
168 - display: flex;  
169 - justify-content: space-between;  
170 - width: 1277px; 83 + .n {
  84 + font-size: 8px;
  85 + border-radius: 15px;
  86 + padding: 3px 10px;
  87 + height: 20px;
  88 + line-height: 20px;
  89 + background-color: white;
  90 + border: #189eff 1px solid;
  91 + margin-right: 25px;
  92 + }
  93 + }
171 94
172 - .leftt {  
173 - font-weight: 800;  
174 - } 95 + .hed {
  96 + margin-top: 37px;
  97 + display: flex;
  98 + justify-content: space-between;
  99 + width: 95%;
175 100
176 - .rightt {  
177 - display: flex; 101 + .leftt {
  102 + font-weight: 800;
  103 + }
  104 +<<<<<<< HEAD
  105 + .bod {
  106 +=======
178 107
179 - .noe {  
180 - width: 70px;  
181 - display: flex;  
182 - justify-content: space-around;  
183 - align-items: center; 108 + .rightt {
  109 +>>>>>>> c8a1193fe202ec9250f041cfa20fabb4916270ac
  110 + display: flex;
184 111
185 - img {  
186 - width: 15px;  
187 - height: 15px;  
188 - } 112 + .noe {
  113 + width: 70px;
  114 + display: flex;
  115 + justify-content: space-around;
  116 + align-items: center;
189 117
  118 + img {
  119 + width: 15px;
  120 + height: 15px;
190 } 121 }
191 } 122 }
192 } 123 }
193 - }</style>  
  124 + }
  125 +}
  126 +</style>