Skip to content

Commit f8741c0

Browse files
hjdhnxhjdhnx
committed
Update:编写设置界面，栅栏布局
1 parent 56bd885 commit f8741c0

File tree

1 file changed

+220
-4
lines changed

1 file changed

+220
-4
lines changed

‎dashboard/src/views/Settings.vue‎

Lines changed: 220 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,151 @@
44
</a-breadcrumb>
55

66
<a-layout-content class="content">
7-
<div>
8-
<h1>设置</h1>
9-
<p>这是设置页面的内容。</p>
10-
</div>
7+
<!-- <div>-->
8+
<!-- <h1>设置</h1>-->
9+
<!-- <p>这是设置页面的内容。</p>-->
10+
<!-- </div>-->
11+
12+
<div class="grid-demo-background">
13+
<a-space direction="vertical" :size="16" style="display: block;">
14+
15+
<a-row class="grid-demo">
16+
<a-col :span="24" class="col-title">
17+
<div> <strong>设置</strong>
18+
</div>
19+
</a-col>
20+
</a-row>
21+
22+
<a-row class="grid-demo">
23+
<a-col :span="23">
24+
<div>配置地址</div>
25+
</a-col>
26+
<a-col :span="1">
27+
<a-button type="primary" size="large">
28+
<template #icon>
29+
<icon-history />
30+
</template>
31+
</a-button>
32+
</a-col>
33+
</a-row>
34+
<a-row class="grid-demo">
35+
<a-col :span="12" class="col-title">
36+
<div><icon-home /> <strong>首页</strong>
37+
</div>
38+
</a-col>
39+
<a-col :span="12" class="col-title">
40+
<div><icon-play-circle /> <strong>播放器</strong>
41+
</div>
42+
</a-col>
43+
</a-row>
44+
45+
<a-row class="grid-demo">
46+
<a-col :span="12">
47+
<div>数据源<span class="col-more"> ></span></div>
48+
</a-col>
49+
<a-col :span="12">
50+
<div>窗口预览<span class="col-more">开启 ></span></div>
51+
</a-col>
52+
</a-row>
53+
54+
<a-row class="grid-demo">
55+
<a-col :span="6">
56+
<div>数据源显示<span class="col-more">开启 ></span></div>
57+
</a-col>
58+
<a-col :span="6">
59+
<div>按钮位置<span class="col-more"> ></span></div>
60+
</a-col>
61+
<a-col :span="6">
62+
<div>页面缩放<span class="col-more">默认 ></span></div>
63+
</a-col>
64+
<a-col :span="6">
65+
<div>后台<span class="col-more">关闭 ></span></div>
66+
</a-col>
67+
</a-row>
68+
<a-row class="grid-demo">
69+
<a-col :span="6">
70+
<div>推荐<span class="col-more">站点推荐 ></span></div>
71+
</a-col>
72+
<a-col :span="6">
73+
<div>历史条数<span class="col-more">100条 ></span></div>
74+
</a-col>
75+
<a-col :span="6">
76+
<div>播放器<span class="col-more">IJK ></span></div>
77+
</a-col>
78+
<a-col :span="6">
79+
<div>IJK解码<span class="col-more">硬解码 ></span></div>
80+
</a-col>
81+
</a-row>
82+
<a-row class="grid-demo">
83+
<a-col :span="12">
84+
<div>启动时进直播<span class="col-more">关闭 ></span></div>
85+
</a-col>
86+
<a-col :span="6">
87+
<div>广告过滤<span class="col-more">开启 ></span></div>
88+
</a-col>
89+
<a-col :span="6">
90+
<div>IJK缓存<span class="col-more">关闭 ></span></div>
91+
</a-col>
92+
</a-row>
93+
94+
<a-row class="grid-demo">
95+
<a-col :span="24" class="col-title">
96+
<div><icon-settings /> <strong>系统</strong>
97+
</div>
98+
</a-col>
99+
</a-row>
100+
101+
<a-row class="grid-demo">
102+
<a-col :span="6">
103+
<div>语言<span class="col-more">中文 ></span></div>
104+
</a-col>
105+
<a-col :span="6">
106+
<div>主题<span class="col-more">奈飞 ></span></div>
107+
</a-col>
108+
<a-col :span="6">
109+
<div>换张壁纸<span class="col-more"> ></span></div>
110+
</a-col>
111+
<a-col :span="6">
112+
<div>重置壁纸<span class="col-more"> ></span></div>
113+
</a-col>
114+
</a-row>
115+
116+
<a-row class="grid-demo">
117+
<a-col :span="12">
118+
<div>渲染方式<span class="col-more">TextureView ></span></div>
119+
</a-col>
120+
<a-col :span="12">
121+
<div>搜索展示<span class="col-more">缩略图 ></span></div>
122+
</a-col>
123+
</a-row>
124+
125+
<a-row class="grid-demo">
126+
<a-col :span="12">
127+
<div>嗅探Webview<span class="col-more">系统自带 ></span></div>
128+
</a-col>
129+
<a-col :span="12">
130+
<div>安全DNS<span class="col-more">关闭 ></span></div>
131+
</a-col>
132+
</a-row>
133+
134+
<a-row class="grid-demo">
135+
<a-col :span="6">
136+
<div>数据备份还原<span class="col-more"> ></span></div>
137+
</a-col>
138+
<a-col :span="6">
139+
<div>重置<span class="col-more"> ></span></div>
140+
</a-col>
141+
<a-col :span="6">
142+
<div>聚搜<span class="col-more">已关闭 ></span></div>
143+
</a-col>
144+
<a-col :span="6">
145+
<div>关于<span class="col-more"> ></span></div>
146+
</a-col>
147+
</a-row>
148+
149+
150+
</a-space>
151+
</div>
11152

12153
</a-layout-content>
13154
</template>
@@ -20,4 +161,79 @@ export default {
20161

21162
<style scoped>
22163
/* 页面样式 */
164+
165+
/*.grid-demo-background {*/
166+
/* background-image: linear-gradient(*/
167+
/* 90deg,*/
168+
/* var(--color-fill-2) 4.16666667%,*/
169+
/* transparent 4.16666667%,*/
170+
/* transparent 8.33333333%,*/
171+
/* var(--color-fill-2) 8.33333333%,*/
172+
/* var(--color-fill-2) 12.5%,*/
173+
/* transparent 12.5%,*/
174+
/* transparent 16.66666667%,*/
175+
/* var(--color-fill-2) 16.66666667%,*/
176+
/* var(--color-fill-2) 20.83333333%,*/
177+
/* transparent 20.83333333%,*/
178+
/* transparent 25%,*/
179+
/* var(--color-fill-2) 25%,*/
180+
/* var(--color-fill-2) 29.16666667%,*/
181+
/* transparent 29.16666667%,*/
182+
/* transparent 33.33333333%,*/
183+
/* var(--color-fill-2) 33.33333333%,*/
184+
/* var(--color-fill-2) 37.5%,*/
185+
/* transparent 37.5%,*/
186+
/* transparent 41.66666667%,*/
187+
/* var(--color-fill-2) 41.66666667%,*/
188+
/* var(--color-fill-2) 45.83333333%,*/
189+
/* transparent 45.83333333%,*/
190+
/* transparent 50%,*/
191+
/* var(--color-fill-2) 50%,*/
192+
/* var(--color-fill-2) 54.16666667%,*/
193+
/* transparent 54.16666667%,*/
194+
/* transparent 58.33333333%,*/
195+
/* var(--color-fill-2) 58.33333333%,*/
196+
/* var(--color-fill-2) 62.5%,*/
197+
/* transparent 62.5%,*/
198+
/* transparent 66.66666667%,*/
199+
/* var(--color-fill-2) 66.66666667%,*/
200+
/* var(--color-fill-2) 70.83333333%,*/
201+
/* transparent 70.83333333%,*/
202+
/* transparent 75%,*/
203+
/* var(--color-fill-2) 75%,*/
204+
/* var(--color-fill-2) 79.16666667%,*/
205+
/* transparent 79.16666667%,*/
206+
/* transparent 83.33333333%,*/
207+
/* var(--color-fill-2) 83.33333333%,*/
208+
/* var(--color-fill-2) 87.5%,*/
209+
/* transparent 87.5%,*/
210+
/* transparent 91.66666667%,*/
211+
/* var(--color-fill-2) 91.66666667%,*/
212+
/* var(--color-fill-2) 95.83333333%,*/
213+
/* transparent 95.83333333%*/
214+
/* );*/
215+
/*}*/
216+
217+
.grid-demo .arco-col {
218+
height: 48px;
219+
line-height: 48px;
220+
color: var(--color-white);
221+
text-align: left;
222+
padding-left: 20px;
223+
padding-right: 20px;
224+
}
225+
.grid-demo .arco-col:nth-child(2n) {
226+
background-color: rgba(var(--arcoblue-6), 0.9);
227+
}
228+
.grid-demo .arco-col:nth-child(2n + 1) {
229+
background-color: var(--color-primary-light-4);
230+
}
231+
.col-more {
232+
text-align: center;
233+
float: right;
234+
}
235+
.grid-demo .arco-col.col-title {
236+
background-color: rgba(var(--arcoblue-6), 0.9);
237+
}
238+
23239
</style>

0 commit comments

Comments
 (0)