feat(首页): 引入iconfont图标库并在首页卡片添加演示图标
- 添加iconfont样式文件,包含丰富的图标字体定义 - 在首页概览卡片标题行中添加演示图标,展示图标使用方式 - 调整卡片标题布局为flex布局以容纳图标和文字
Showing
3 changed files
with
340 additions
and
0 deletions
| ... | @@ -9,6 +9,7 @@ | ... | @@ -9,6 +9,7 @@ |
| 9 | @tailwind base; | 9 | @tailwind base; |
| 10 | @tailwind components; | 10 | @tailwind components; |
| 11 | @tailwind utilities; | 11 | @tailwind utilities; |
| 12 | +@import "@/assets/styles/iconfont.less"; | ||
| 12 | 13 | ||
| 13 | :root { | 14 | :root { |
| 14 | --nut-primary-color: #A67939; | 15 | --nut-primary-color: #A67939; | ... | ... |
src/assets/styles/iconfont.less
0 → 100644
| 1 | +@font-face { | ||
| 2 | + font-family: "iconfont"; | ||
| 3 | + src: | ||
| 4 | + url("https://at.alicdn.com/t/c/font_4618760_7lrp6nlwv9y.woff2?t=1778124018667") format("woff2"), | ||
| 5 | + url("https://at.alicdn.com/t/c/font_4618760_7lrp6nlwv9y.woff?t=1778124018667") format("woff"), | ||
| 6 | + url("https://at.alicdn.com/t/c/font_4618760_7lrp6nlwv9y.ttf?t=1778124018667") format("truetype"); | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +.iconfont { | ||
| 10 | + font-family: "iconfont" !important; | ||
| 11 | + font-size: 16px; | ||
| 12 | + font-style: normal; | ||
| 13 | + -webkit-font-smoothing: antialiased; | ||
| 14 | + -moz-osx-font-smoothing: grayscale; | ||
| 15 | +} | ||
| 16 | + | ||
| 17 | +.icon-zanwuneirong:before { | ||
| 18 | + content: "\e64b"; | ||
| 19 | +} | ||
| 20 | + | ||
| 21 | +.icon-zhiribiao:before { | ||
| 22 | + content: "\e6c2"; | ||
| 23 | +} | ||
| 24 | + | ||
| 25 | +.icon-yanzhengma:before { | ||
| 26 | + content: "\e6c1"; | ||
| 27 | +} | ||
| 28 | + | ||
| 29 | +.icon-changdigailan:before { | ||
| 30 | + content: "\e6bf"; | ||
| 31 | +} | ||
| 32 | + | ||
| 33 | +.icon-queren:before { | ||
| 34 | + content: "\e6c0"; | ||
| 35 | +} | ||
| 36 | + | ||
| 37 | +.icon-jichengmingdanguanli:before { | ||
| 38 | + content: "\e6bb"; | ||
| 39 | +} | ||
| 40 | + | ||
| 41 | +.icon-shenqingbiao:before { | ||
| 42 | + content: "\e6bc"; | ||
| 43 | +} | ||
| 44 | + | ||
| 45 | +.icon-weixintongzhimoban:before { | ||
| 46 | + content: "\e6bd"; | ||
| 47 | +} | ||
| 48 | + | ||
| 49 | +.icon-gangweihuizong:before { | ||
| 50 | + content: "\e6be"; | ||
| 51 | +} | ||
| 52 | + | ||
| 53 | +.icon-mima:before { | ||
| 54 | + content: "\e6b5"; | ||
| 55 | +} | ||
| 56 | + | ||
| 57 | +.icon-shoucang:before { | ||
| 58 | + content: "\e6b6"; | ||
| 59 | +} | ||
| 60 | + | ||
| 61 | +.icon-daiban:before { | ||
| 62 | + content: "\e6b7"; | ||
| 63 | +} | ||
| 64 | + | ||
| 65 | +.icon-faqi:before { | ||
| 66 | + content: "\e6b8"; | ||
| 67 | +} | ||
| 68 | + | ||
| 69 | +.icon-chaosong:before { | ||
| 70 | + content: "\e6b9"; | ||
| 71 | +} | ||
| 72 | + | ||
| 73 | +.icon-geren:before { | ||
| 74 | + content: "\e6ba"; | ||
| 75 | +} | ||
| 76 | + | ||
| 77 | +.icon-zhankai:before { | ||
| 78 | + content: "\e6b0"; | ||
| 79 | +} | ||
| 80 | + | ||
| 81 | +.icon-fanhui:before { | ||
| 82 | + content: "\e6b1"; | ||
| 83 | +} | ||
| 84 | + | ||
| 85 | +.icon-guanbi:before { | ||
| 86 | + content: "\e6b2"; | ||
| 87 | +} | ||
| 88 | + | ||
| 89 | +.icon-guan:before { | ||
| 90 | + content: "\e6b3"; | ||
| 91 | +} | ||
| 92 | + | ||
| 93 | +.icon-kai:before { | ||
| 94 | + content: "\e6b4"; | ||
| 95 | +} | ||
| 96 | + | ||
| 97 | +.icon-bianji:before { | ||
| 98 | + content: "\e6a8"; | ||
| 99 | +} | ||
| 100 | + | ||
| 101 | +.icon-tianjia:before { | ||
| 102 | + content: "\e6a9"; | ||
| 103 | +} | ||
| 104 | + | ||
| 105 | +.icon-gouwuche:before { | ||
| 106 | + content: "\e6aa"; | ||
| 107 | +} | ||
| 108 | + | ||
| 109 | +.icon-rili:before { | ||
| 110 | + content: "\e6ab"; | ||
| 111 | +} | ||
| 112 | + | ||
| 113 | +.icon-shanchu:before { | ||
| 114 | + content: "\e6ac"; | ||
| 115 | +} | ||
| 116 | + | ||
| 117 | +.icon-dianhua:before { | ||
| 118 | + content: "\e6ad"; | ||
| 119 | +} | ||
| 120 | + | ||
| 121 | +.icon-right:before { | ||
| 122 | + content: "\e6ae"; | ||
| 123 | +} | ||
| 124 | + | ||
| 125 | +.icon-dui:before { | ||
| 126 | + content: "\e6af"; | ||
| 127 | +} | ||
| 128 | + | ||
| 129 | +.icon-left:before { | ||
| 130 | + content: "\e6a7"; | ||
| 131 | +} | ||
| 132 | + | ||
| 133 | +.icon-nv-01:before { | ||
| 134 | + content: "\e6a5"; | ||
| 135 | +} | ||
| 136 | + | ||
| 137 | +.icon-nan-01:before { | ||
| 138 | + content: "\e6a6"; | ||
| 139 | +} | ||
| 140 | + | ||
| 141 | +.icon-sousuo:before { | ||
| 142 | + content: "\e69c"; | ||
| 143 | +} | ||
| 144 | + | ||
| 145 | +.icon-nianfogongxiu:before { | ||
| 146 | + content: "\e69d"; | ||
| 147 | +} | ||
| 148 | + | ||
| 149 | +.icon-qita:before { | ||
| 150 | + content: "\e69e"; | ||
| 151 | +} | ||
| 152 | + | ||
| 153 | +.icon-huodonghaibao:before { | ||
| 154 | + content: "\e69f"; | ||
| 155 | +} | ||
| 156 | + | ||
| 157 | +.icon-rusizhinan:before { | ||
| 158 | + content: "\e6a0"; | ||
| 159 | +} | ||
| 160 | + | ||
| 161 | +.icon-renyuan:before { | ||
| 162 | + content: "\e6a1"; | ||
| 163 | +} | ||
| 164 | + | ||
| 165 | +.icon-changdishenqing:before { | ||
| 166 | + content: "\e6a2"; | ||
| 167 | +} | ||
| 168 | + | ||
| 169 | +.icon-huodongguanli:before { | ||
| 170 | + content: "\e6a3"; | ||
| 171 | +} | ||
| 172 | + | ||
| 173 | +.icon-changguicanxue:before { | ||
| 174 | + content: "\e6a4"; | ||
| 175 | +} | ||
| 176 | + | ||
| 177 | +.icon-yingyong:before { | ||
| 178 | + content: "\e68d"; | ||
| 179 | +} | ||
| 180 | + | ||
| 181 | +.icon-renyuandingwei:before { | ||
| 182 | + content: "\e68e"; | ||
| 183 | +} | ||
| 184 | + | ||
| 185 | +.icon-xiaoxi:before { | ||
| 186 | + content: "\e68f"; | ||
| 187 | +} | ||
| 188 | + | ||
| 189 | +.icon-guiyigongxiu:before { | ||
| 190 | + content: "\e690"; | ||
| 191 | +} | ||
| 192 | + | ||
| 193 | +.icon-wodebaoming:before { | ||
| 194 | + content: "\e691"; | ||
| 195 | +} | ||
| 196 | + | ||
| 197 | +.icon-wodeyuyue:before { | ||
| 198 | + content: "\e692"; | ||
| 199 | +} | ||
| 200 | + | ||
| 201 | +.icon-shaotouxiang:before { | ||
| 202 | + content: "\e693"; | ||
| 203 | +} | ||
| 204 | + | ||
| 205 | +.icon-xinzhongmingdan:before { | ||
| 206 | + content: "\e694"; | ||
| 207 | +} | ||
| 208 | + | ||
| 209 | +.icon-a-3Dloucengdaolan:before { | ||
| 210 | + content: "\e695"; | ||
| 211 | +} | ||
| 212 | + | ||
| 213 | +.icon-huodongkanban:before { | ||
| 214 | + content: "\e696"; | ||
| 215 | +} | ||
| 216 | + | ||
| 217 | +.icon-wode:before { | ||
| 218 | + content: "\e697"; | ||
| 219 | +} | ||
| 220 | + | ||
| 221 | +.icon-dicangfahui:before { | ||
| 222 | + content: "\e698"; | ||
| 223 | +} | ||
| 224 | + | ||
| 225 | +.icon-shijian:before { | ||
| 226 | + content: "\e699"; | ||
| 227 | +} | ||
| 228 | + | ||
| 229 | +.icon-shouye:before { | ||
| 230 | + content: "\e69a"; | ||
| 231 | +} | ||
| 232 | + | ||
| 233 | +.icon-nianduhuodongbiao:before { | ||
| 234 | + content: "\e69b"; | ||
| 235 | +} | ||
| 236 | + | ||
| 237 | +.icon-yigongmingdan:before { | ||
| 238 | + content: "\e67f"; | ||
| 239 | +} | ||
| 240 | + | ||
| 241 | +.icon-jingjinfoqi:before { | ||
| 242 | + content: "\e680"; | ||
| 243 | +} | ||
| 244 | + | ||
| 245 | +.icon-yufojie:before { | ||
| 246 | + content: "\e681"; | ||
| 247 | +} | ||
| 248 | + | ||
| 249 | +.icon-zhongyuanjie:before { | ||
| 250 | + content: "\e682"; | ||
| 251 | +} | ||
| 252 | + | ||
| 253 | +.icon-shuhuazhan:before { | ||
| 254 | + content: "\e683"; | ||
| 255 | +} | ||
| 256 | + | ||
| 257 | +.icon-zuchang:before { | ||
| 258 | + content: "\e684"; | ||
| 259 | +} | ||
| 260 | + | ||
| 261 | +.icon-wuzishenqing:before { | ||
| 262 | + content: "\e685"; | ||
| 263 | +} | ||
| 264 | + | ||
| 265 | +.icon-zuchangtongxunlu:before { | ||
| 266 | + content: "\e686"; | ||
| 267 | +} | ||
| 268 | + | ||
| 269 | +.icon-zhusushenqing:before { | ||
| 270 | + content: "\e687"; | ||
| 271 | +} | ||
| 272 | + | ||
| 273 | +.icon-shezhi:before { | ||
| 274 | + content: "\e688"; | ||
| 275 | +} | ||
| 276 | + | ||
| 277 | +.icon-yijian:before { | ||
| 278 | + content: "\e689"; | ||
| 279 | +} | ||
| 280 | + | ||
| 281 | +.icon-zhongyaoshebeibaojing:before { | ||
| 282 | + content: "\e68a"; | ||
| 283 | +} | ||
| 284 | + | ||
| 285 | +.icon-yongcanshenqing:before { | ||
| 286 | + content: "\e68b"; | ||
| 287 | +} | ||
| 288 | + | ||
| 289 | +.icon-shengtaifangsheng:before { | ||
| 290 | + content: "\e68c"; | ||
| 291 | +} | ||
| 292 | + | ||
| 293 | +.icon-VRzhanshi:before { | ||
| 294 | + content: "\e67e"; | ||
| 295 | +} | ||
| 296 | + | ||
| 297 | +.icon-ditudaolan:before { | ||
| 298 | + content: "\e677"; | ||
| 299 | +} | ||
| 300 | + | ||
| 301 | +.icon-guanyindan:before { | ||
| 302 | + content: "\e678"; | ||
| 303 | +} | ||
| 304 | + | ||
| 305 | +.icon-chanxiuying:before { | ||
| 306 | + content: "\e679"; | ||
| 307 | +} | ||
| 308 | + | ||
| 309 | +.icon-sanguiwujie:before { | ||
| 310 | + content: "\e67a"; | ||
| 311 | +} | ||
| 312 | + | ||
| 313 | +.icon-baguanzhaijie:before { | ||
| 314 | + content: "\e67b"; | ||
| 315 | +} | ||
| 316 | + | ||
| 317 | +.icon-fangsheng:before { | ||
| 318 | + content: "\e67c"; | ||
| 319 | +} | ||
| 320 | + | ||
| 321 | +.icon-jingxiuying:before { | ||
| 322 | + content: "\e67d"; | ||
| 323 | +} |
| ... | @@ -21,7 +21,10 @@ | ... | @@ -21,7 +21,10 @@ |
| 21 | 21 | ||
| 22 | <view class="overview-grid"> | 22 | <view class="overview-grid"> |
| 23 | <view class="overview-card"> | 23 | <view class="overview-card"> |
| 24 | + <view class="card-title-row"> | ||
| 24 | <text class="card-title">首页</text> | 25 | <text class="card-title">首页</text> |
| 26 | + <i class="fa iconfont icon-jingxiuying iconfont-demo"></i> | ||
| 27 | + </view> | ||
| 25 | <text class="card-desc">展示当前项目概览、地图导览与测试入口。</text> | 28 | <text class="card-desc">展示当前项目概览、地图导览与测试入口。</text> |
| 26 | </view> | 29 | </view> |
| 27 | <view class="overview-card"> | 30 | <view class="overview-card"> |
| ... | @@ -219,6 +222,19 @@ useDidShow(() => { | ... | @@ -219,6 +222,19 @@ useDidShow(() => { |
| 219 | color: #111827; | 222 | color: #111827; |
| 220 | } | 223 | } |
| 221 | 224 | ||
| 225 | + .card-title-row { | ||
| 226 | + display: flex; | ||
| 227 | + align-items: center; | ||
| 228 | + justify-content: space-between; | ||
| 229 | + gap: 16rpx; | ||
| 230 | + } | ||
| 231 | + | ||
| 232 | + .iconfont-demo { | ||
| 233 | + flex-shrink: 0; | ||
| 234 | + font-size: 42rpx; | ||
| 235 | + color: #a67939; | ||
| 236 | + } | ||
| 237 | + | ||
| 222 | .map-entry-card, | 238 | .map-entry-card, |
| 223 | .webview-entry-card, | 239 | .webview-entry-card, |
| 224 | .test-entry-card { | 240 | .test-entry-card { | ... | ... |
-
Please register or login to post a comment