mirror of
https://github.com/spark-store-project/spark-store-abyss
synced 2025-12-16 03:32:06 +08:00
feat: (WIP) implementing about page
Co-authored-by: 奕 <a18355849597@outlook.com>
This commit is contained in:
30
assets/icons/about-deco.svg
Normal file
30
assets/icons/about-deco.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 37 KiB |
12
assets/icons/about-indicator.svg
Normal file
12
assets/icons/about-indicator.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg viewBox="62 0 574 166"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden">
|
||||
<style>
|
||||
:root {
|
||||
--s-color: #FEDDD7;
|
||||
}
|
||||
</style>
|
||||
<g transform="translate(-892 -1090)">
|
||||
<path d="M635.753 165.643C578.386 165.643 525.073 135.304 496.433 85.5497 466.999 34.42 411.847 0 348.656 0 285.468 0 230.312 34.42 200.878 85.5497 172.242 135.304 118.925 165.643 61.5585 165.643L0 165.643 676.096 165.643 635.753 165.643Z" style="fill: var(--s-color)" transform="matrix(1 0 0 1.00215 892 1090)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 616 B |
27
assets/icons/amber-ce.svg
Normal file
27
assets/icons/amber-ce.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
46
assets/icons/fantascene.svg
Normal file
46
assets/icons/fantascene.svg
Normal file
@@ -0,0 +1,46 @@
|
||||
<svg viewBox="0 0 334 273"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden">
|
||||
<style>
|
||||
:root {
|
||||
--s-deco: #D66447;
|
||||
--s-bg: #FDEFEF;
|
||||
}
|
||||
</style>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<path d="M5730.37 3106.1 6019.69 3165.81 5975.8 3378.46 5686.48 3318.75 5730.37 3106.1Z" fill-rule="evenodd" clip-rule="evenodd"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1">
|
||||
<path d="M5730.37 3106.1 6019.69 3165.81 5975.8 3378.46 5686.48 3318.75Z" fill-rule="evenodd" clip-rule="evenodd"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2">
|
||||
<path d="M5730.37 3106.1 6019.69 3165.81 5975.8 3378.46 5686.48 3318.75Z" fill-rule="evenodd" clip-rule="evenodd"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g transform="translate(-5686 -3106)">
|
||||
<g clip-path="url(#clip0)">
|
||||
<g clip-path="url(#clip1)">
|
||||
<g clip-path="url(#clip2)">
|
||||
<path d="M168.596 173.773C174.13 196.217 160.427 218.901 137.99 224.443 115.542 229.981 92.8538 216.279 87.3158 193.834 81.774 171.389 95.4764 148.705 117.925 143.163 140.37 137.625 163.05 151.328 168.596 173.773" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M163.639 194.313C163.639 205.609 154.475 214.777 143.175 214.777 131.874 214.777 122.714 205.609 122.714 194.313 122.714 183.009 131.874 173.845 143.175 173.845 154.475 173.845 163.639 183.009 163.639 194.313" style="fill: var(--s-bg)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M76.3614 179.292C76.3614 179.292 76.8707 178.436 77.7639 176.939 78.661 175.441 79.9723 173.32 81.6523 170.834 82.4961 169.599 83.4578 168.292 84.4536 166.889 85.4913 165.521 86.5784 164.065 87.7909 162.632 89.0262 161.214 90.2691 159.717 91.6869 158.333 92.371 157.618 93.0704 156.908 93.8268 156.246 94.5756 155.585 95.2902 154.87 96.077 154.243 96.8676 153.616 97.662 152.993 98.4526 152.373 99.2812 151.807 100.106 151.24 100.927 150.682 101.733 150.1 102.626 149.667 103.458 149.169 104.295 148.663 105.161 148.253 106.02 147.854 107.7 146.983 109.437 146.402 111.053 145.79 112.706 145.299 114.249 144.764 115.724 144.456 116.454 144.281 117.153 144.114 117.822 143.954 118.495 143.84 119.134 143.73 119.738 143.627 120.935 143.414 121.981 143.247 122.851 143.156 124.588 142.962 125.58 142.852 125.58 142.852 125.58 142.852 124.603 143.053 122.897 143.41 122.038 143.562 121.008 143.806 119.837 144.106 119.248 144.25 118.624 144.406 117.967 144.57 117.317 144.76 116.633 144.961 115.918 145.166 114.477 145.539 112.98 146.136 111.38 146.694 109.821 147.363 108.156 148.017 106.53 148.891 105.705 149.302 104.865 149.72 104.067 150.233 103.265 150.742 102.406 151.176 101.619 151.742 100.824 152.297 100.026 152.852 99.2204 153.411 98.4564 154.023 97.6848 154.638 96.917 155.25 96.1416 155.859 95.4384 156.554 94.701 157.197 93.9522 157.835 93.2643 158.531 92.5839 159.226 91.1889 160.579 89.9118 162.005 88.6651 163.381 87.4526 164.783 86.2971 166.163 85.2062 167.471 84.161 168.816 83.1461 170.074 82.2491 171.268 81.3749 172.473 80.55 173.56 79.8165 174.525 79.0905 175.498 78.4861 176.372 77.9768 177.076 76.9467 178.49 76.3614 179.292 76.3614 179.292" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M59.3787 156.718C59.3787 156.718 59.4737 156.25 59.6561 155.372 59.7512 154.935 59.869 154.395 60.0058 153.76 60.1275 153.122 60.3175 152.4 60.557 151.594 60.7888 150.784 61.0473 149.883 61.3286 148.907 61.6631 147.949 62.0241 146.911 62.4156 145.805 62.8033 144.695 63.3203 143.555 63.8144 142.327 64.3047 141.099 64.9775 139.883 65.5971 138.564 66.2508 137.264 67.011 135.957 67.7674 134.577 68.1893 133.912 68.615 133.235 69.0483 132.551 69.4778 131.863 69.9226 131.167 70.4167 130.495 72.2982 127.724 74.5293 124.976 76.9961 122.262 79.5162 119.609 82.2871 117.005 85.3089 114.614 88.3496 112.242 91.6185 110.068 95.0203 108.122 98.4564 106.245 102.018 104.591 105.633 103.242 109.251 101.911 112.919 100.919 116.5 100.155 120.099 99.4751 123.611 99.0037 126.956 98.8593 127.788 98.7871 128.613 98.7757 129.427 98.7643 130.236 98.7529 131.034 98.7453 131.821 98.7377 133.391 98.8137 134.908 98.8517 136.356 98.9733 137.8 99.133 139.191 99.1976 140.499 99.4218 141.803 99.6461 143.042 99.8019 144.193 100.049 145.341 100.3 146.417 100.517 147.405 100.748 148.382 101.022 149.279 101.273 150.089 101.501 150.898 101.714 151.617 101.934 152.229 102.166 152.841 102.383 153.365 102.565 153.791 102.713 154.631 103.018 155.083 103.177 155.083 103.177 155.083 103.177 154.608 103.105 153.722 102.964 152.833 102.839 151.556 102.569 149.902 102.387 149.078 102.284 148.169 102.174 147.177 102.052 146.185 101.965 145.109 101.877 143.962 101.782 141.67 101.634 139.085 101.562 136.276 101.588 134.87 101.607 133.41 101.718 131.905 101.786 130.4 101.957 128.841 102.006 127.256 102.25 126.466 102.356 125.66 102.466 124.85 102.577 124.037 102.702 123.223 102.877 122.399 103.025 120.745 103.299 119.088 103.732 117.389 104.101 114.025 104.983 110.604 106.062 107.206 107.377 103.831 108.746 100.479 110.308 97.2439 112.102 94.0245 113.919 90.9381 115.956 88.0037 118.115 85.1036 120.316 82.3973 122.676 79.8811 125.078 77.4447 127.553 75.1147 129.997 73.1382 132.517 72.1043 133.741 71.2491 135.044 70.314 136.234 69.4664 137.481 68.6074 138.671 67.8586 139.857 66.3686 142.24 65.0725 144.478 64.0006 146.512 63.4799 147.542 62.9972 148.5 62.5487 149.389 62.1344 150.298 61.7581 151.13 61.4122 151.883 60.7052 153.384 60.2605 154.631 59.907 155.452 59.5611 156.277 59.3787 156.718 59.3787 156.718" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M354.364 156.718C354.364 156.718 354.178 156.277 353.836 155.452 353.478 154.631 353.037 153.38 352.327 151.883 351.985 151.13 351.604 150.298 351.194 149.389 350.745 148.5 350.259 147.538 349.742 146.512 348.666 144.478 347.374 142.24 345.884 139.857 345.131 138.671 344.276 137.481 343.429 136.234 342.494 135.044 341.638 133.741 340.601 132.517 338.632 129.993 336.298 127.553 333.862 125.078 331.345 122.672 328.639 120.316 325.739 118.115 322.808 115.952 319.718 113.919 316.499 112.102 313.264 110.308 309.912 108.746 306.536 107.377 303.142 106.058 299.717 104.983 296.354 104.101 294.658 103.728 292.997 103.299 291.344 103.025 290.519 102.877 289.706 102.702 288.896 102.577 288.083 102.466 287.281 102.356 286.486 102.25 284.901 102.006 283.343 101.957 281.842 101.786 280.336 101.718 278.873 101.607 277.47 101.588 274.662 101.562 272.077 101.634 269.781 101.782 268.633 101.877 267.561 101.965 266.565 102.052 265.577 102.174 264.665 102.284 263.844 102.387 262.187 102.569 260.91 102.839 260.024 102.964 259.135 103.105 258.663 103.177 258.663 103.177 258.663 103.177 259.112 103.018 259.956 102.713 260.381 102.565 260.902 102.383 261.518 102.166 262.13 101.934 262.844 101.714 263.654 101.501 264.464 101.273 265.364 101.022 266.337 100.748 267.326 100.517 268.401 100.3 269.553 100.049 270.701 99.8019 271.944 99.6461 273.248 99.4218 274.551 99.1976 275.942 99.133 277.387 98.9733 278.839 98.8517 280.352 98.8137 281.921 98.7377 282.708 98.7453 283.506 98.7529 284.32 98.7643 285.129 98.7757 285.958 98.7871 286.79 98.8593 290.135 99.0037 293.644 99.4751 297.247 100.155 300.827 100.919 304.495 101.911 308.114 103.242 311.725 104.591 315.286 106.241 318.726 108.122 322.128 110.068 325.393 112.242 328.434 114.614 331.459 117.005 334.226 119.605 336.75 122.262 339.213 124.972 341.444 127.724 343.326 130.491 343.82 131.167 344.265 131.863 344.698 132.551 345.128 133.235 345.557 133.912 345.975 134.577 346.732 135.957 347.492 137.264 348.146 138.564 348.765 139.879 349.438 141.096 349.928 142.327 350.422 143.555 350.935 144.695 351.327 145.805 351.715 146.911 352.08 147.949 352.414 148.907 352.695 149.883 352.95 150.784 353.182 151.594 353.425 152.4 353.611 153.122 353.733 153.76 353.87 154.395 353.988 154.935 354.083 155.372 354.265 156.25 354.364 156.718 354.364 156.718" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M252.202 175.255C247.416 197.874 261.871 220.087 284.491 224.873 307.11 229.658 329.319 215.203 334.109 192.583 338.894 169.964 324.439 147.751 301.816 142.969 279.2 138.18 256.987 152.639 252.202 175.255" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M258.663 194.313C258.663 205.609 267.824 214.777 279.124 214.777 290.428 214.777 299.588 205.609 299.588 194.313 299.588 183.009 290.428 173.845 279.124 173.845 267.824 173.845 258.663 183.009 258.663 194.313" style="fill: var(--s-bg)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M344.569 177.684C344.569 177.684 343.953 176.901 342.881 175.525 342.345 174.837 341.714 173.985 340.954 173.035 340.19 172.096 339.327 171.032 338.411 169.858 337.476 168.698 336.423 167.474 335.329 166.167 334.196 164.893 332.999 163.556 331.737 162.195 330.448 160.861 329.118 159.477 327.681 158.173 326.978 157.501 326.263 156.828 325.499 156.216 324.735 155.596 324.009 154.927 323.215 154.346 322.428 153.757 321.638 153.167 320.851 152.586 320.03 152.054 319.213 151.522 318.399 150.997 317.597 150.454 316.719 150.051 315.902 149.572 315.085 149.085 314.233 148.694 313.393 148.314 311.74 147.493 310.052 146.896 308.475 146.276 306.856 145.775 305.339 145.227 303.887 144.904 303.169 144.722 302.477 144.543 301.823 144.376 301.158 144.235 300.527 144.102 299.938 143.977 298.752 143.714 297.718 143.505 296.855 143.38 295.137 143.084 294.157 142.912 294.157 142.912 294.157 142.912 295.149 142.988 296.89 143.129 297.764 143.186 298.817 143.319 300.022 143.494 300.626 143.578 301.268 143.665 301.945 143.756 302.618 143.893 303.321 144.034 304.058 144.186 305.541 144.444 307.099 144.927 308.771 145.364 310.406 145.923 312.162 146.444 313.872 147.257 314.739 147.629 315.625 148.01 316.472 148.488 317.324 148.956 318.232 149.359 319.057 149.91 319.897 150.442 320.741 150.982 321.588 151.522 322.398 152.115 323.207 152.711 324.021 153.308 324.83 153.912 325.568 154.6 326.339 155.235 327.119 155.87 327.841 156.558 328.548 157.25 330.011 158.584 331.303 160.04 332.584 161.416 333.843 162.807 334.979 164.228 336.066 165.559 337.104 166.927 338.111 168.2 338.997 169.409 340.76 171.838 342.14 173.913 343.086 175.377 344.029 176.844 344.569 177.684 344.569 177.684" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M179.827 248.617C197.281 266.075 225.507 266.106 242.939 248.682 242.939 248.682 246.204 311.964 211.315 313.504 211.315 313.504 178.429 315.438 179.827 248.617" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M107.229 186.969C106.564 192.01 108.419 199.783 95.7197 199.783 108.335 199.783 106.317 208.088 107.229 212.596 107.229 199.292 113.143 200.82 118.738 199.783 106.693 199.646 107.818 191.884 107.229 186.969" style="fill: var(--s-bg)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M98.54 199.783C106.359 200.74 106.754 205.792 107.081 209.939 107.096 210.144 107.111 210.349 107.126 210.554 107.643 200.999 111.855 200.497 116.306 199.969 116.583 199.935 116.853 199.904 117.127 199.866 107.974 199.182 107.575 193.503 107.24 188.889L107.233 188.752C107.218 188.969 107.21 189.189 107.195 189.413 106.974 193.655 106.701 198.844 98.54 199.783ZM107.229 212.751 107.081 212.63C106.917 211.828 106.849 210.923 106.773 209.962 106.419 205.495 105.99 199.935 95.7197 199.935L95.7235 199.817 95.7197 199.627 95.7235 199.627C106.355 199.627 106.64 194.191 106.883 189.394 106.936 188.532 106.978 187.714 107.073 186.947L107.229 186.814 107.385 186.947C107.457 187.555 107.503 188.193 107.548 188.87 107.89 193.606 108.308 199.509 118.738 199.627L118.894 199.767 118.769 199.931C117.959 200.083 117.134 200.182 116.344 200.273 111.539 200.843 107.385 201.337 107.385 212.596L107.244 212.751 107.229 212.751" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M120.255 148.96C119.385 155.577 121.813 165.783 105.146 165.783 121.707 165.783 119.054 176.684 120.255 182.606 120.255 165.133 128.02 167.144 135.364 165.783 119.552 165.6 121.027 155.41 120.255 148.96" style="fill: var(--s-bg)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M108.852 165.783C119.111 167.037 119.628 173.674 120.057 179.113 120.08 179.387 120.095 179.66 120.118 179.926 120.791 167.375 126.329 166.722 132.175 166.026 132.528 165.981 132.886 165.943 133.25 165.893 121.232 164.992 120.703 157.539 120.266 151.48L120.259 151.301C120.24 151.586 120.228 151.875 120.209 152.168 119.92 157.74 119.559 164.548 108.852 165.783ZM120.255 182.807C120.16 182.807 120.072 182.743 120.061 182.644 119.844 181.599 119.749 180.405 119.654 179.147 119.194 173.282 118.624 165.981 105.146 165.981L105.15 165.821 105.146 165.578 105.15 165.578C119.099 165.578 119.476 158.443 119.803 152.145 119.867 151.009 119.92 149.933 120.05 148.933 120.069 148.827 120.152 148.755 120.255 148.755 120.361 148.755 120.445 148.827 120.456 148.933 120.551 149.728 120.608 150.564 120.677 151.453 121.118 157.679 121.673 165.426 135.364 165.578 135.47 165.578 135.558 165.657 135.565 165.764 135.58 165.867 135.508 165.962 135.402 165.977 134.338 166.174 133.262 166.307 132.22 166.429 125.915 167.178 120.456 167.828 120.456 182.606 120.456 182.709 120.38 182.796 120.274 182.807L120.255 182.807" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M316.126 187.171C316.795 192.211 314.94 199.984 327.639 199.984 315.028 199.984 317.046 208.289 316.126 212.797 316.126 199.497 310.216 201.025 304.625 199.984 316.666 199.847 315.545 192.086 316.126 187.171" style="fill: var(--s-bg)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M316.16 189.615C316.153 189.394 316.138 189.17 316.126 188.957L316.115 189.094C315.788 193.705 315.381 199.383 306.232 200.071 306.506 200.106 306.78 200.136 307.053 200.174 311.504 200.699 315.72 201.2 316.233 210.756 316.248 210.554 316.263 210.349 316.282 210.14 316.609 205.997 317 200.942 324.811 199.988 316.662 199.045 316.381 193.861 316.16 189.615ZM316.111 212.957 315.974 212.797C315.974 201.542 311.82 201.048 307.015 200.478 306.217 200.387 305.404 200.288 304.594 200.136L304.469 199.973 304.617 199.832C315.047 199.714 315.469 193.815 315.811 189.071 315.856 188.399 315.906 187.756 315.978 187.152L316.126 187.015 316.282 187.152C316.381 187.916 316.427 188.737 316.468 189.6 316.719 194.393 317.008 199.832 327.639 199.832L327.639 200.136C317.369 200.136 316.936 205.701 316.586 210.163 316.514 211.125 316.442 212.033 316.274 212.831L316.126 212.957 316.111 212.957" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M303.104 149.161C303.978 155.783 301.55 165.984 318.213 165.984 301.656 165.984 304.305 176.889 303.104 182.807 303.104 165.338 295.339 167.349 287.999 165.984 303.811 165.802 302.336 155.619 303.104 149.161" style="fill: var(--s-bg)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
<path d="M303.15 152.369C303.131 152.077 303.119 151.788 303.104 151.506L303.097 151.681C302.656 157.74 302.127 165.194 290.109 166.095 290.47 166.144 290.831 166.186 291.188 166.228 297.03 166.923 302.564 167.581 303.237 180.128 303.26 179.862 303.283 179.592 303.306 179.314 303.731 173.875 304.248 167.239 314.511 165.988 303.804 164.753 303.442 157.945 303.15 152.369ZM303.085 183.013C302.983 183.001 302.899 182.914 302.899 182.807 302.899 168.029 297.448 167.379 291.135 166.631 290.101 166.509 289.018 166.38 287.961 166.178 287.855 166.163 287.786 166.072 287.794 165.965 287.801 165.859 287.885 165.783 287.992 165.783 301.683 165.627 302.238 157.881 302.686 151.658 302.751 150.769 302.808 149.929 302.906 149.138 302.914 149.036 303.002 148.96 303.104 148.96 303.203 148.96 303.294 149.036 303.306 149.138 303.439 150.142 303.496 151.214 303.553 152.346 303.883 158.645 304.256 165.783 318.213 165.783L318.213 166.186C304.739 166.186 304.165 173.487 303.708 179.349 303.61 180.61 303.518 181.804 303.302 182.853 303.287 182.944 303.199 183.013 303.104 183.013L303.085 183.013" style="fill: var(--s-deco)" transform="matrix(0.980654 0.202406 -0.202138 0.979357 5692.08 2997.57)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
44
assets/icons/gxde.svg
Normal file
44
assets/icons/gxde.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
21
assets/icons/package-manager.svg
Normal file
21
assets/icons/package-manager.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg viewBox="0 0 222 223"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden">
|
||||
<style>
|
||||
:root {
|
||||
--s-deco: #D66447;
|
||||
--s-bg: #EB9079;
|
||||
}
|
||||
</style>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect x="4940" y="3121" width="222" height="223"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#clip0)" transform="translate(-4940 -3121)">
|
||||
<path d="M35.7113 44.7493 35.7113 150.869 93.3919 150.869C118.392 150.869 138.66 130.6 138.66 105.6L138.66 44.7493 35.7113 44.7493Z" style="fill: var(--s-bg)" transform="matrix(1 0 0 1.0045 4904.16 3076.16)"/>
|
||||
<path d="M257.766 266.807 257.766 161.386 201.103 161.386C176.103 161.386 155.834 181.651 155.834 206.654L155.834 266.804 257.766 266.804Z" style="fill: var(--s-bg)" transform="matrix(1 0 0 1.0045 4904.16 3076.16)"/>
|
||||
<path d="M232.675 45.9944 180.925 45.9944C167.068 45.9944 155.831 57.228 155.831 71.0856L155.831 122.835C155.831 136.693 167.065 147.926 180.925 147.926L232.675 147.926C246.532 147.926 257.766 136.693 257.766 122.835L257.766 71.0856C257.766 57.228 246.532 45.9944 232.675 45.9944Z" style="fill: var(--s-bg)" transform="matrix(1 0 0 1.0045 4904.16 3076.16)"/>
|
||||
<path d="M112.555 164.872 60.8055 164.872C46.948 164.872 35.7113 176.106 35.7113 189.963L35.7113 241.713C35.7113 255.57 46.945 266.807 60.8055 266.807L112.555 266.807C126.412 266.807 137.649 255.573 137.649 241.713L137.649 189.963C137.646 176.106 126.412 164.872 112.555 164.872Z" style="fill: var(--s-deco)" transform="matrix(1 0 0 1.0045 4904.16 3076.16)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
45
assets/icons/wine-runner.svg
Normal file
45
assets/icons/wine-runner.svg
Normal file
@@ -0,0 +1,45 @@
|
||||
<svg viewBox="0 0 296 272"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden">
|
||||
<style>
|
||||
:root {
|
||||
--s-bg: rgb(from #D66447 r g b / 0.55);
|
||||
--s-deco: #D66447;
|
||||
}
|
||||
</style>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect x="0" y="0" width="245858" height="620463"/>
|
||||
</clipPath>
|
||||
<mask id="image-mask">
|
||||
<image width="89" height="224" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAADgCAMAAABfEDogAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAzUExURQAAAP///////////////////////////////////////////////////////////////7eV4oIAAAARdFJOUwAQv9+A/58g7zCPUHCvYEDP34KeDQAAAAlwSFlzAAAOwwAADsMBx2+oZAAABCVJREFUeF7tmt2yqyAMhUvbY63VXd//ac8gpoYICmRx4Qzf5a57DbNIQvi53QTm/ijhbqTQjue/MjopJHn18l9SeUspQSf/IZm7lPJ5ye8zOB70ID/P4NDpcpctLynHKA0Mx8GgzUN+nEUfj+mP/DaTUQr+uMtPM+mlIPGWX2bzkZIr5VlCTFLSYVQh5wgHni7kHIMUXdCFnCM4h9qQc/xJ2dvtNsmPigjMIWL+LPs5xJgRsgNjRsgORGRYdmUJZcbeDs1i4iPtQJmxS5av/F2BbweiZhD+ooUzQ9hh5K8qeBriYs7Cl0OkzX7cIW32jMbazI3G2syNxtrMjdZ2MJKf0WibN6ORRcNBvdIof1DzXJX1XZeEphC1BG7QFGIzcMEJa/ZTMdw+Cx8alIX40KDgwIcGBQc6ty0uOCqExqoMakJ9lh5M/hGCVa4Rzi6g9bvAEN9KieJasD/5Rwg2CWukoEvCOsp2y4nryTm2IUW3BI4rKlufr6iMbhcdNgfrZLftkurUOquM7xctS89YZU1ZlGf5VwDzsg7WKByuK6gR0O50rUZAu9a8RnCs2wn8FLoJrDGFdIiJN/p3WozOlf63PUb3udseFl2U2NE5ttF9bMLgPon2mRZssnjHucg59A8Zka2uuPrAbYPkPSEu8GxP7oFyWh7l4sJjN2TUoEN3hJDLia0WcRCJyNOPoY+8WV4frKj96KMX09rmMXbxqF4Rw1d4K5plPGayQ5EvfSBHOOXrePxKeqU0FQ9NdpRJd4cmr5RIJwmX5OJxWDBypZOFc6UzhG8mJ2NyhLOk52BJPiD1uDvhiZMkrToN+cJpe66EzAtxWq57eU+czPt4kekPKv0Zh9Ia4cOnT2f1+IzoE6X4appKrP9VWeEINziF4eYTysapJEF2BBocvcmO/WlvpH3LR8bH7vVHMXISYUOWToeb5DL8irrfipTjN2XKtPbhcxh821UMtwNpht9I4iLDwo0GRoZlMxprMzcaazM3GmszP0uARrM3heAJZKeF8gc11ELyIzMM1FLTMS0OCjt5TKSH+kfIou1B6wo6nLdUOd2qZkPKxY1tlHrK1KbXUwZ0igLqSa+kTGUUXUSbsk9T5jRlTlPmNGUOVf4rKuNXq6bMuaJyve6rvnK9XrQpW5oyp55yvV3blZXr7bubsqUpc+gcqSlbmjKnKXOuqExXpvhTYlLGn2zTWyL0FdB2642/m6ArMfSF2G9Dj78D2m7T0cGxvX0C28GfzEB3V4Y/14IO2n+zAEyWUbyzgPWjUhhVlsywE8YY8pWPN1aUjpgx/hpuLrfk/ekCPnCmMfO9jHl/xuEecUEydc+/72ktMe/PcJ9PBhrmMXVj9CjPPBOHGWcIDv5bNFZJqKiEnkrlE1py0t4tnhFaJk2X9/40QD9Pm9H/AagYx1ZmKgUpAAAAAElFTkSuQmCC" preserveAspectRatio="none" id="img1"></image>
|
||||
</mask>
|
||||
<clipPath id="clip2">
|
||||
<rect x="0" y="0" width="245858" height="618789"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3">
|
||||
<path d="M3343.19 3130.95 3569 3105.6 3596.62 3351.62 3370.81 3376.97 3343.19 3130.95Z" fill-rule="evenodd" clip-rule="evenodd"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4">
|
||||
<path d="M3343.19 3130.95 3569 3105.6 3596.62 3351.62 3370.81 3376.97Z" fill-rule="evenodd" clip-rule="evenodd"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip5">
|
||||
<path d="M3343.19 3130.95 3569 3105.6 3596.62 3351.62 3370.81 3376.97Z" fill-rule="evenodd" clip-rule="evenodd"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g transform="translate(-3301 -3105)">
|
||||
<g clip-path="url(#clip0)" transform="matrix(0.00033967 -0.000121934 0.000121934 0.00033967 3301.94 3145.61)">
|
||||
<g clip-path="url(#clip2)" transform="matrix(1 -2.44866e-08 2.55831e-08 1.00271 -9.31323e-10 0)">
|
||||
<rect width="100%" height="100%" style="fill: var(--s-bg)" transform="scale(2762.45 2762.45)" mask="url(#image-mask)" />
|
||||
</g>
|
||||
</g>
|
||||
<g clip-path="url(#clip3)">
|
||||
<g clip-path="url(#clip4)">
|
||||
<g clip-path="url(#clip5)">
|
||||
<path d="M3532.01 3161.91C3546.86 3160.24 3557.6 3147.33 3556.01 3133.12 3554.41 3118.9 3541.08 3108.73 3526.23 3110.4 3511.34 3112.07 3500.6 3124.95 3502.19 3139.16 3503.79 3153.37 3517.12 3163.58 3532.01 3161.91" style="fill: var(--s-deco)"/>
|
||||
<path d="M3455.28 3177.71 3430.25 3220.06C3428.78 3222.72 3426.32 3224.53 3423.35 3224.86 3418.09 3225.45 3413.28 3221.04 3412.61 3215.02 3412.24 3211.74 3413.14 3208.68 3414.89 3206.45L3441.91 3160.92C3443.38 3158.32 3445.84 3156.48 3448.81 3156.15L3494.71 3150.96C3498.09 3150.58 3501.29 3151.82 3503.8 3154.03L3536.85 3184.38 3557.99 3153.84C3559.52 3151.97 3561.61 3150.74 3564.01 3150.47 3569.44 3149.86 3574.39 3154.42 3575.09 3160.67 3575.39 3163.39 3574.87 3165.95 3573.69 3168.07L3548.25 3205.22C3540.5 3216.4 3532.38 3208.56 3532.38 3208.56L3512.11 3189.85 3488.25 3230.28 3517.26 3256.93C3517.26 3256.93 3523.34 3262.1 3521.52 3273.94L3515.39 3349.36C3514.97 3355.9 3510.59 3361.28 3504.7 3361.94 3497.93 3362.7 3491.76 3357 3490.89 3349.25 3490.75 3348.01 3490.73 3346.81 3490.87 3345.66L3495.93 3283.8 3463.06 3254.46 3441.54 3289.47C3441.54 3289.47 3438.13 3295.67 3427.31 3296.46L3376.35 3302.28C3370.67 3303.01 3365 3299.13 3362.99 3292.63 3360.63 3285.25 3363.86 3277.37 3370.27 3274.95 3371.27 3274.58 3372.29 3274.36 3373.29 3274.28L3417.13 3269.49 3472.24 3175.9 3455.28 3177.71Z" style="fill: var(--s-deco)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -34,6 +34,7 @@ export default defineNuxtConfig({
|
||||
globInclude: ["pages/*.vue", "app.vue"],
|
||||
globExclude: ["node_modules", "dist"],
|
||||
},
|
||||
sizeLimitKb: 512,
|
||||
},
|
||||
},
|
||||
css: ["~/assets/css/main.css"],
|
||||
@@ -145,4 +146,4 @@ document.documentElement.classList.toggle("s-dark", sDarkValue);`,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
286
pages/about.vue
286
pages/about.vue
@@ -1,5 +1,287 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const scrollPanel = inject<Ref<ComponentPublicInstance>>("scrollPanel");
|
||||
const sProgress = ref(0);
|
||||
|
||||
onMounted(() => {
|
||||
watchEffect(() => {
|
||||
const scrollTop = (
|
||||
scrollPanel?.value as unknown as { lastScrollTop: number }
|
||||
).lastScrollTop;
|
||||
const clientHeight = scrollPanel?.value?.$el.clientHeight;
|
||||
sProgress.value = scrollTop / clientHeight;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page"></div>
|
||||
<div
|
||||
class="page bg-primary-100"
|
||||
:style="{
|
||||
transform: sProgress > 6 ? 'translate(0)' : 'none',
|
||||
}"
|
||||
>
|
||||
<section
|
||||
class="flex w-full h-screen snap-start pt-27 pb-42 px-24 items-center justify-center gap-8"
|
||||
>
|
||||
<!-- 左侧文字区域 -->
|
||||
<div class="flex flex-col items-start gap-6">
|
||||
<div class="flex items-center justify-center gap-6">
|
||||
<h2
|
||||
class="text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
|
||||
>
|
||||
关于星火社区
|
||||
<span
|
||||
class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50"
|
||||
>
|
||||
ABOUT US
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex flex-col dark:text-surface-200">
|
||||
<p class="text-lg font-bold indent-[2em]">
|
||||
星火社区是由一群专注于改善国内Linux应用生态的开发者组成的开源协作团队。
|
||||
</p>
|
||||
<p class="text-lg indent-[2em]">
|
||||
我们以解决 Linux
|
||||
软件生态匮乏、资源分散为核心目标，通过技术整合与协作创新，致力于降低
|
||||
Linux 发行版的使用门槛。团队的核心成果<span class="font-bold"
|
||||
>「星火应用商店」</span
|
||||
>整合了海量分散的 Linux 应用资源，覆盖各类应用程序。同时开发的
|
||||
<span class="font-bold"
|
||||
>GXDE OS、Wine 运⾏器、Amber CE 兼容环境 </span
|
||||
>等项目，均围绕“让 Linux 更易用”的理念丰富用户体验。
|
||||
</p>
|
||||
<p class="text-lg indent-[2em]">
|
||||
我们坚持开放协作原则，欢迎每一位认同开源理念、愿意为开源生态添砖加瓦的伙伴，无论是贡献一行代码、一份文档、一个测试反馈，还是一种新的思路……
|
||||
</p>
|
||||
<p class="text-lg indent-[2em]">
|
||||
<span class="font-bold">
|
||||
我们坚信，小小的努力都可以汇成巨大的洪流，星星之火必将燎原。</span
|
||||
>我们期待通过社区用户的互助和支持，让星火计划的火焰持续燃烧，为
|
||||
Linux 生态系统带来持续的活力。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧图片区域 -->
|
||||
<Icon
|
||||
name="s:about-deco"
|
||||
class="shrink-0 s-deco-secondary-900 s-bg-primary-200 dark:s-deco-secondary-100 dark:s-bg-primary-500"
|
||||
mode="svg"
|
||||
:style="{ height: '80%', width: 'auto' }"
|
||||
/>
|
||||
</section>
|
||||
<div v-for="i in 6" :key="i" class="w-full h-screen snap-start" />
|
||||
<nav
|
||||
class="flex justify-center gap-14 fixed bottom-0 z-[0] w-full h-45 bg-primary-50 transition-transform duration-100 pointer-events-none"
|
||||
:style="{
|
||||
transform: `translateY(calc(${-range(
|
||||
0,
|
||||
1,
|
||||
sProgress
|
||||
)} * (100vh - 15 * var(--spacing) - 100%)))`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="relative flex gap-14 items-center"
|
||||
:style="{
|
||||
translate: `calc(${
|
||||
25 - 25 * range(0, 1, sProgress)
|
||||
} * var(--spacing)) 0`,
|
||||
}"
|
||||
>
|
||||
<h2
|
||||
class="absolute left-0 -translate-x-[calc(100%+14*var(--spacing))] font-(family-name:--s-title-font) text-4xl text-primary-400 w-36 self-center pointer-events-auto"
|
||||
:style="{
|
||||
transform: `translateX(calc(${
|
||||
25 * range(0, 1, sProgress)
|
||||
} * var(--spacing))`,
|
||||
opacity: 1 - range(0, 1, sProgress),
|
||||
}"
|
||||
>
|
||||
点击了解<br />星火软件
|
||||
</h2>
|
||||
<Icon
|
||||
name="s:about-indicator"
|
||||
class="absolute left-3 bottom-0 w-20 h-[auto]! s-color-primary-100"
|
||||
mode="svg"
|
||||
:style="{
|
||||
transform: `translateX(calc(${
|
||||
40 * (sProgress - 1)
|
||||
} * var(--spacing))`,
|
||||
opacity:
|
||||
(range(0, 0.5, sProgress - 0.5) -
|
||||
range(0, 0.5, sProgress - 6.5)) *
|
||||
2,
|
||||
}"
|
||||
/>
|
||||
<div class="relative p-5 rounded-full bg-white pointer-events-auto">
|
||||
<Icon
|
||||
name="sp:spark"
|
||||
class="w-16 h-16 s-color-primary-color"
|
||||
mode="svg"
|
||||
/>
|
||||
<div
|
||||
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br"
|
||||
:style="{
|
||||
clipPath:
|
||||
sProgress <= 1
|
||||
? `circle(${range(0, 1, sProgress) * 108}% at left 20%)`
|
||||
: `circle(${
|
||||
(2 - range(1, 2, sProgress)) * 108
|
||||
}% at right 80%)`,
|
||||
}"
|
||||
>
|
||||
<Icon name="sp:spark" class="w-16 h-16 s-color-white" mode="svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative p-5 rounded-full bg-white pointer-events-auto">
|
||||
<Icon
|
||||
name="s:gxde"
|
||||
class="w-16 h-16 s-deco-primary-color s-bg-primary-400"
|
||||
mode="svg"
|
||||
/>
|
||||
<div
|
||||
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br"
|
||||
:style="{
|
||||
clipPath:
|
||||
sProgress <= 2
|
||||
? `circle(${range(0, 1, sProgress - 1) * 108}% at left 20%)`
|
||||
: `circle(${
|
||||
(3 - range(2, 3, sProgress)) * 108
|
||||
}% at right 80%)`,
|
||||
}"
|
||||
>
|
||||
<Icon
|
||||
name="s:gxde"
|
||||
class="w-16 h-16 s-deco-white s-bg-[rgba(255,255,255,0.5)]"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative p-5 rounded-full bg-white pointer-events-auto">
|
||||
<Icon
|
||||
name="s:wine-runner"
|
||||
class="w-16 h-16 s-deco-primary-color s-bg-primary-400"
|
||||
mode="svg"
|
||||
/>
|
||||
<div
|
||||
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br"
|
||||
:style="{
|
||||
clipPath:
|
||||
sProgress <= 3
|
||||
? `circle(${range(0, 1, sProgress - 2) * 108}% at left 20%)`
|
||||
: `circle(${
|
||||
(4 - range(3, 4, sProgress)) * 108
|
||||
}% at right 80%)`,
|
||||
}"
|
||||
>
|
||||
<Icon
|
||||
name="s:wine-runner"
|
||||
class="w-16 h-16 s-deco-white s-bg-[rgba(255,255,255,0.5)]"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative p-5 rounded-full bg-white pointer-events-auto">
|
||||
<Icon
|
||||
name="s:amber-ce"
|
||||
class="w-16 h-16 s-deco-primary-color"
|
||||
mode="svg"
|
||||
/>
|
||||
<div
|
||||
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br"
|
||||
:style="{
|
||||
clipPath:
|
||||
sProgress <= 4
|
||||
? `circle(${range(0, 1, sProgress - 3) * 108}% at left 20%)`
|
||||
: `circle(${
|
||||
(5 - range(4, 5, sProgress)) * 108
|
||||
}% at right 80%)`,
|
||||
}"
|
||||
>
|
||||
<Icon name="s:amber-ce" class="w-16 h-16 s-deco-white" mode="svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative p-7 rounded-full bg-white pointer-events-auto">
|
||||
<Icon
|
||||
name="s:package-manager"
|
||||
class="w-12 h-12 s-deco-primary-color s-bg-primary-400"
|
||||
mode="svg"
|
||||
/>
|
||||
<div
|
||||
class="absolute p-7 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br"
|
||||
:style="{
|
||||
clipPath:
|
||||
sProgress <= 5
|
||||
? `circle(${range(0, 1, sProgress - 4) * 108}% at left 20%)`
|
||||
: `circle(${
|
||||
(6 - range(5, 6, sProgress)) * 108
|
||||
}% at right 80%)`,
|
||||
}"
|
||||
>
|
||||
<Icon
|
||||
name="s:package-manager"
|
||||
class="w-12 h-12 s-deco-white s-bg-[rgba(255,255,255,0.5)]"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative p-5 rounded-full bg-white pointer-events-auto">
|
||||
<Icon
|
||||
name="s:fantascene"
|
||||
class="w-16 h-16 s-deco-primary-color s-bg-white"
|
||||
mode="svg"
|
||||
/>
|
||||
<div
|
||||
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br"
|
||||
:style="{
|
||||
clipPath:
|
||||
sProgress <= 6
|
||||
? `circle(${range(0, 1, sProgress - 5) * 108}% at left 20%)`
|
||||
: `circle(${
|
||||
(7 - range(6, 7, sProgress)) * 108
|
||||
}% at right 80%)`,
|
||||
}"
|
||||
>
|
||||
<Icon
|
||||
name="s:fantascene"
|
||||
class="w-16 h-16 s-deco-white s-bg-primary-400"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
class="fixed bottom-0 z-[0] flex h-[calc(100vh-60*var(--spacing))] bg-primary-100 pointer-events-none transition-transform duration-100"
|
||||
:style="{
|
||||
transform: `translateY(${
|
||||
100 - range(0, 1, sProgress) * 100
|
||||
}%) translateX(${-100 * (range(1, 6, sProgress) - 1)}vw)`,
|
||||
}"
|
||||
>
|
||||
<section class="flex w-screen h-full items-center justify-center gap-16">
|
||||
<div class="relative w-130 h-92 bg-white rounded-3xl"></div>
|
||||
<div class="flex w-134 h-92 bg-white pointer-events-auto">
|
||||
<div class="flex"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex w-screen h-full item-center justify-center">
|
||||
2
|
||||
</section>
|
||||
<section class="flex w-screen h-full item-center justify-center">
|
||||
3
|
||||
</section>
|
||||
<section class="flex w-screen h-full item-center justify-center">
|
||||
4
|
||||
</section>
|
||||
<section class="flex w-screen h-full item-center justify-center">
|
||||
5
|
||||
</section>
|
||||
<section class="flex w-screen h-full item-center justify-center">
|
||||
6
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user