mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-22 20:56:33 +08:00
feat/login/uiedit (#21)
* feat: login ui edit * feat: login page add dark theme * feat: login page over * feat: ui Update * feat: update start script Co-authored-by: pengyue970715@gmail.com
This commit is contained in:
PY
GitHub
parent
63ab08dbe3
commit
c76ac96178
16
.eslintrc
16
.eslintrc
|
|
@ -46,6 +46,20 @@
|
|||
"import/prefer-default-export": "off",
|
||||
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off"
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"vue/first-attribute-linebreak": 0
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.vue"],
|
||||
"rules": {
|
||||
"vue/component-name-in-template-casing": [2, "kebab-case"],
|
||||
"vue/require-default-prop": 0,
|
||||
"vue/multi-word-component-names": 0,
|
||||
"vue/no-reserved-props": 0,
|
||||
"vue/no-v-html": 0,
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
"name": "tdesign-vue-next-starter",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"start:mock": "vite --open --mode mock",
|
||||
"start": "vite --open --mode development",
|
||||
"dev:mock": "vite --open --mode mock",
|
||||
"dev": "vite --open --mode development",
|
||||
"build:test": "vite build --mode test",
|
||||
"build": "vue-tsc --noEmit && vite build --mode release",
|
||||
"preview": "vite preview",
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
"echarts": "^5.2.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"qrcode.vue": "^3.2.2",
|
||||
"tdesign-vue-next": "^0.4.1",
|
||||
"tdesign-vue-next": "^0.5.0",
|
||||
"vue": "^3.1.5",
|
||||
"vue-router": "^4.0.11",
|
||||
"vue3-clipboard": "^1.0.0",
|
||||
|
|
|
|||
21
src/App.vue
21
src/App.vue
|
|
@ -1,4 +1,21 @@
|
|||
<template>
|
||||
<router-view />
|
||||
<router-view :class="[mode]" />
|
||||
</template>
|
||||
<script></script>
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore();
|
||||
|
||||
const mode = computed(() => {
|
||||
return store.getters['setting/mode'];
|
||||
});
|
||||
|
||||
return {
|
||||
mode,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
41
src/assets/assets-t-logo.svg
Normal file
41
src/assets/assets-t-logo.svg
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2557_23660)">
|
||||
<path d="M9.14038 8.25177H3.53919C3.45719 8.25173 3.37619 8.23372 3.30188 8.19901C3.22758 8.16431 3.16179 8.11375 3.10912 8.05089C3.05646 7.98803 3.01819 7.91439 2.99703 7.83516C2.97587 7.75593 2.97234 7.67303 2.98665 7.59228L3.87785 2.44561C3.90079 2.32052 3.96685 2.20742 4.06455 2.12601C4.16225 2.04459 4.2854 2.00001 4.41258 2.00001H10.2054L9.14038 8.25177Z" fill="url(#paint0_linear_2557_23660)"/>
|
||||
<path d="M13.0301 21.4727H6.77832L9.11772 8.2473H15.3695L13.0301 21.4727Z" fill="url(#paint1_linear_2557_23660)"/>
|
||||
<path d="M11.4707 27.7245H6.34183C6.26051 27.7236 6.18034 27.7051 6.10678 27.6704C6.03322 27.6358 5.96801 27.5856 5.91557 27.5235C5.86313 27.4613 5.82471 27.3886 5.80292 27.3102C5.78113 27.2319 5.77648 27.1497 5.78929 27.0694L6.78297 21.4861H13.0214L11.9965 27.2789C11.9738 27.4025 11.9091 27.5144 11.8132 27.5956C11.7174 27.6769 11.5963 27.7224 11.4707 27.7245Z" fill="url(#paint2_linear_2557_23660)"/>
|
||||
<path d="M26.666 8.25176H9.14062L10.2457 2.01337H27.5795C27.6613 2.01417 27.7419 2.03268 27.8158 2.06763C27.8898 2.10258 27.9552 2.15313 28.0077 2.21581C28.0603 2.27849 28.0986 2.35179 28.12 2.43069C28.1415 2.50959 28.1456 2.59221 28.1321 2.67285L27.2186 7.81953C27.1941 7.94607 27.1246 8.0595 27.0231 8.13892C26.9216 8.21834 26.7948 8.25841 26.666 8.25176V8.25176Z" fill="url(#paint3_linear_2557_23660)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_2557_23660" x1="2.71742" y1="5.12812" x2="10.0624" y2="4.98122" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0062FF"/>
|
||||
<stop offset="0.26" stop-color="#006AFF"/>
|
||||
<stop offset="0.68" stop-color="#0081FF"/>
|
||||
<stop offset="1" stop-color="#0097FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_2557_23660" x1="12.383" y1="7.62346" x2="9.12269" y2="22.0419" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0097FF"/>
|
||||
<stop offset="0.32" stop-color="#0081FF"/>
|
||||
<stop offset="0.74" stop-color="#006AFF"/>
|
||||
<stop offset="1" stop-color="#0062FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_2557_23660" x1="5.63057" y1="27.3635" x2="12.8582" y2="21.4727" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#009EFF"/>
|
||||
<stop offset="0.31" stop-color="#00A3FF"/>
|
||||
<stop offset="0.71" stop-color="#00B3FF"/>
|
||||
<stop offset="1" stop-color="#00C3FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_2557_23660" x1="8.84911" y1="5.12811" x2="27.9399" y2="4.74629" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.03" stop-color="#ECFFFE"/>
|
||||
<stop offset="0.19" stop-color="#AFF1D9"/>
|
||||
<stop offset="0.34" stop-color="#79E5B9"/>
|
||||
<stop offset="0.49" stop-color="#4EDB9F"/>
|
||||
<stop offset="0.63" stop-color="#2CD48A"/>
|
||||
<stop offset="0.77" stop-color="#14CE7C"/>
|
||||
<stop offset="0.89" stop-color="#05CB73"/>
|
||||
<stop offset="1" stop-color="#00CA70"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_2557_23660">
|
||||
<rect width="25.1407" height="25.72" fill="white" transform="translate(2.97754 2)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/login-bg-black.png
Normal file
BIN
src/assets/login-bg-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 801 KiB |
BIN
src/assets/login-bg-white.png
Normal file
BIN
src/assets/login-bg-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1005 KiB |
39
src/assets/logo-full.svg
Normal file
39
src/assets/logo-full.svg
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<svg width="188" height="26" viewBox="0 0 188 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M77.7301 8.34426H80.6699L78.3234 21.7922H75.3799L77.7301 8.34426Z" fill="currentcolor"/>
|
||||
<path d="M78.5992 3.09961H81.6221L81.0742 6.12246H78.0513L78.5992 3.09961Z" fill="currentcolor"/>
|
||||
<path d="M32.5765 6.46921H36.937L37.4131 3.82422H25.4615L24.9854 6.46921H29.3723L26.6706 21.7913H29.8559L32.5765 6.46921Z" fill="currentcolor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.4051 11.4275C51.5998 10.4187 51.7035 9.39434 51.7149 8.3669C51.7149 4.97375 50.007 3.8364 45.4765 3.84774H39.2381L36.083 21.8035H43.3908C48.1329 21.8035 49.8181 20.5906 50.8836 14.4504L51.4051 11.4275ZM45.0004 6.47006C47.5623 6.47006 48.5372 6.80258 48.5372 8.83922C48.5177 9.70444 48.4254 10.5665 48.2613 11.4162L47.7399 14.4391C47.0522 18.4481 46.3191 19.1585 42.7597 19.1585H39.7369L41.9473 6.47006H45.0004Z" fill="currentcolor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.863 10.8329C63.8629 11.1826 63.8313 11.5317 63.7685 11.8758L63.436 13.765C63.0582 15.8735 62.276 16.6103 60.3074 16.6103H55.0816L54.9607 17.3471C54.8956 17.6913 54.8564 18.0399 54.8436 18.39C54.8436 19.2175 55.2705 19.4102 56.6459 19.4102H61.4145L60.4396 21.8058H56.0754C52.9958 21.8058 51.9189 21.0199 51.9189 19.1004C51.9308 18.5439 51.9864 17.9893 52.0852 17.4416L53.011 12.1289C53.5777 8.85291 54.9531 8.19166 58.4407 8.19166H60.0542C62.5292 8.17654 63.863 8.83779 63.863 10.8329ZM60.9006 11.2599C60.9006 10.6893 60.5454 10.5457 59.4534 10.5457H57.7682C56.6762 10.5457 56.1547 10.6893 55.8789 12.1138L55.501 14.294H59.5327C59.6593 14.3151 59.7889 14.3081 59.9124 14.2735C60.036 14.239 60.1504 14.1778 60.2477 14.0942C60.345 14.0106 60.4228 13.9066 60.4755 13.7897C60.5283 13.6728 60.5547 13.5457 60.553 13.4174L60.8137 11.8758C60.8561 11.6728 60.8826 11.4669 60.893 11.2599H60.9006Z" fill="currentcolor"/>
|
||||
<path d="M69.644 19.3964H64.0215L64.4485 21.8185H69.644C72.4477 21.8185 73.1543 21.486 73.5813 19.0186L73.842 17.5072C73.9744 16.8585 74.0527 16.2001 74.0762 15.5385C74.0762 14.1896 73.3885 13.7853 71.3028 13.7853H68.4575C67.9096 13.7853 67.7471 13.7361 67.7471 13.4301C67.754 13.2471 67.7768 13.065 67.8152 12.886L68.0079 11.8166C68.1741 10.8909 68.3366 10.7511 69.2624 10.7511H74.269L75.2627 8.35547H69.2624C66.5834 8.35547 65.873 8.6502 65.3969 11.3783L65.208 12.4477C65.073 13.0947 64.9933 13.752 64.9699 14.4125C64.9699 15.7652 65.6576 16.1695 67.7471 16.1695H70.4715C71.0194 16.1695 71.1856 16.2187 71.1856 16.5247C71.1769 16.7078 71.1529 16.8898 71.1139 17.0688L70.8985 18.3271C70.7322 19.2529 70.566 19.3964 69.644 19.3964Z" fill="currentcolor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.2642 13.8225C93.4341 12.9856 93.5377 12.1366 93.5741 11.2833C93.5741 9.00486 92.3158 8.17735 89.3194 8.16602H87.6833C83.7196 8.16602 82.843 9.03509 82.1553 12.8137L81.8001 14.7823C81.6298 15.6192 81.5262 16.4682 81.4902 17.3215C81.4902 19.5962 82.7372 20.4275 85.76 20.4275H89.1607L88.9945 21.3532C88.6393 23.439 88.2841 23.5826 86.4326 23.5826H81.5469L81.9739 26.0008H87.0976C89.8258 26.0008 91.2238 25.3585 91.7944 22.1354L93.2642 13.8225ZM90.3132 13.7961L89.5877 18.0432L86.4931 18.0318C84.9287 18.0318 84.43 17.8429 84.43 16.8227C84.475 16.1366 84.5697 15.4547 84.7133 14.7823L85.0723 12.8137C85.3784 11.0944 85.6618 10.5465 87.4641 10.5465H88.5335C90.0751 10.5465 90.5966 10.7392 90.5966 11.7557C90.5573 12.4423 90.4625 13.1247 90.3132 13.7961Z" fill="currentcolor"/>
|
||||
<path d="M107.112 10.7615C107.059 11.7344 106.933 12.7019 106.735 13.6559L105.31 21.7911H102.37L103.818 13.6559C103.946 13.0334 104.026 12.4016 104.056 11.7666C104.056 10.9353 103.7 10.7691 102.586 10.7691H99.1208L97.2013 21.776H94.2578L96.6081 8.32812H103.13C106.183 8.34324 107.112 9.06872 107.112 10.7615Z" fill="currentcolor"/>
|
||||
<path d="M112.333 21.9715H117.879C121.093 21.9715 122.473 21.5668 123.045 18.3532L123.473 15.9727C123.568 15.4728 123.783 14.0683 123.783 13.4017C123.783 11.6164 122.497 11.3307 120.474 11.3307H117.427C116.76 11.3307 116.427 11.2117 116.427 10.807C116.427 10.5928 116.498 10.1167 116.617 9.49773L116.903 8.02182C117.141 6.80777 117.332 6.56972 118.427 6.56972H124.211L125.306 3.95117H118.26C115.284 3.95117 114.356 4.61771 113.856 7.47431L113.404 9.99763C113.285 10.688 113.19 11.3069 113.19 11.8306C113.19 13.3303 113.832 14.0683 115.76 14.0683H119.307C120.164 14.0683 120.498 14.1159 120.498 14.6396C120.498 14.9015 120.45 15.4252 120.283 16.2583L120.045 17.4962C119.736 19.1625 119.498 19.3292 117.927 19.3292H111.856L112.333 21.9715Z" fill="currentcolor"/>
|
||||
<path d="M130.124 10.8784H133.909L134.337 8.47411H130.552L131.266 4.47488H128.314L127.6 8.47411H125.815L125.41 10.8784H127.172L126.101 16.9487C125.958 17.7104 125.839 18.5436 125.839 19.1625C125.839 21.2574 127.172 21.9715 129.838 21.9715H131.576L132.599 19.5672H130.981C129.433 19.5672 128.838 19.5434 128.838 18.5912C128.838 18.2103 128.933 17.5914 129.052 16.9487L130.124 10.8784Z" fill="currentcolor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M136.155 8.47411H142.344C145.034 8.47411 146.081 9.21207 146.081 10.926C146.081 11.4973 145.915 12.4495 145.772 13.2589L144.248 21.9715H137.107C134.798 21.9715 134.084 21.1384 134.084 19.5672C134.084 18.9959 134.179 18.377 134.298 17.6628L134.441 16.8535C135.012 13.6636 136.059 13.4732 139.297 13.4732H142.868L142.939 13.0447C143.034 12.5448 143.106 12.1639 143.106 11.8306C143.106 11.1165 142.701 10.8784 141.344 10.8784H136.559L136.155 8.47411ZM137.059 18.8531C137.059 19.4244 137.297 19.5672 137.94 19.5672H141.796L142.463 15.7584H138.749C137.75 15.7584 137.512 15.9727 137.345 16.9487L137.154 18.0199C137.083 18.4008 137.059 18.6626 137.059 18.8531Z" fill="currentcolor"/>
|
||||
<path d="M146.66 21.9715H149.636L151.231 12.9971C151.54 11.2117 151.897 10.926 153.611 10.926H155.778L156.801 8.47411H153.516C149.779 8.47411 148.922 9.14065 148.279 12.8304L146.66 21.9715Z" fill="currentcolor"/>
|
||||
<path d="M165.098 10.8784H161.313L160.242 16.9487C160.123 17.5914 160.028 18.2103 160.028 18.5912C160.028 19.5434 160.623 19.5672 162.17 19.5672H163.789L162.765 21.9715H161.027C158.361 21.9715 157.028 21.2574 157.028 19.1625C157.028 18.5436 157.147 17.7104 157.29 16.9487L158.361 10.8784H156.6L157.004 8.47411H158.79L159.504 4.47488H162.456L161.742 8.47411H165.527L165.098 10.8784Z" fill="currentcolor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M173.343 8.30748H171.724C168.225 8.30748 166.844 8.97402 166.273 12.2591L165.345 17.5914C165.249 18.1627 165.178 18.7579 165.178 19.2578C165.178 21.186 166.273 21.9715 169.368 21.9715H173.748L174.724 19.5672H169.939C168.558 19.5672 168.13 19.3768 168.13 18.5436C168.13 18.2818 168.177 17.9009 168.249 17.4962L168.368 16.7582H173.605C175.581 16.7582 176.366 16.0203 176.747 13.9016L177.08 12.0211C177.152 11.6402 177.176 11.2593 177.176 10.9736C177.176 8.97402 175.843 8.30748 173.343 8.30748ZM174.129 12.0211L173.867 13.5684C173.772 14.1873 173.51 14.4492 172.843 14.4492H168.796L169.177 12.2591C169.439 10.8308 169.963 10.688 171.058 10.688H172.748C173.843 10.688 174.2 10.8308 174.2 11.4021C174.2 11.5688 174.176 11.7354 174.129 12.0211Z" fill="currentcolor"/>
|
||||
<path d="M179.919 21.9715H176.943L178.562 12.8304C179.205 9.14065 180.062 8.47411 183.799 8.47411H187.084L186.06 10.926H183.894C182.18 10.926 181.823 11.2117 181.514 12.9971L179.919 21.9715Z" fill="currentcolor"/>
|
||||
<path d="M5.21231 5.28999H0.481548C0.412498 5.29078 0.344103 5.27654 0.281107 5.24826C0.21811 5.21998 0.162019 5.17833 0.116725 5.12621C0.0714314 5.07408 0.0380182 5.01273 0.0188032 4.9464C-0.000411771 4.88008 -0.00496858 4.81036 0.00544886 4.7421L0.783833 0.377856C0.80328 0.271783 0.8593 0.175885 0.942146 0.106846C1.02499 0.0378082 1.12942 0 1.23726 0L6.14939 0L5.21231 5.28999Z" fill="#0064FF"/>
|
||||
<path d="M8.52984 16.5117H3.22852L5.21226 5.29688H10.5136L8.52984 16.5117Z" fill="url(#paint0_linear_18110_34031)"/>
|
||||
<path d="M7.20647 21.8093H2.85735C2.78839 21.8085 2.72041 21.7929 2.65803 21.7635C2.59565 21.7341 2.54035 21.6915 2.49589 21.6388C2.45142 21.5861 2.41884 21.5244 2.40036 21.458C2.38188 21.3916 2.37794 21.3219 2.38881 21.2538L3.23142 16.5117H8.52142L7.65235 21.4239C7.63472 21.53 7.58048 21.6267 7.49905 21.6971C7.41761 21.7675 7.3141 21.8072 7.20647 21.8093V21.8093Z" fill="#009BFF"/>
|
||||
<path d="M20.0919 5.28999H5.21191L6.149 0H20.8476C20.9168 0.00013044 20.9851 0.0153276 21.0478 0.0445343C21.1105 0.0737409 21.166 0.116256 21.2106 0.169121C21.2552 0.221986 21.2878 0.283932 21.306 0.35065C21.3242 0.417368 21.3277 0.487255 21.3162 0.555449L20.5416 4.91213C20.5236 5.01823 20.4685 5.11448 20.3862 5.1837C20.3038 5.25293 20.1995 5.2906 20.0919 5.28999V5.28999Z" fill="url(#paint1_linear_18110_34031)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_18110_34031" x1="7.81543" y1="4.88815" x2="7.92589" y2="15.4398" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#009BFF"/>
|
||||
<stop offset="0.35" stop-color="#0081FE"/>
|
||||
<stop offset="0.75" stop-color="#006AFD"/>
|
||||
<stop offset="1" stop-color="#0062FD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_18110_34031" x1="5.68577" y1="2.65136" x2="20.3785" y2="5.41299" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.03" stop-color="#E9FFFF"/>
|
||||
<stop offset="0.17" stop-color="#C4FAC9"/>
|
||||
<stop offset="0.33" stop-color="#A0F694"/>
|
||||
<stop offset="0.48" stop-color="#82F269"/>
|
||||
<stop offset="0.63" stop-color="#6AEF47"/>
|
||||
<stop offset="0.76" stop-color="#5AED2F"/>
|
||||
<stop offset="0.89" stop-color="#4FEB20"/>
|
||||
<stop offset="1" stop-color="#4CEB1B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
@import '@/style/index';
|
||||
@import '@/style/variables.less';
|
||||
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
> span {
|
||||
display: inline-block;
|
||||
color: black;
|
||||
color: @text-color-primary;
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
/* 计量统计 */
|
||||
.dashboard-bottom-left-top-count-chart {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
background-color: @bg-color-container;
|
||||
border-radius: @border-radius;
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
/* 动态监测 */
|
||||
.dashboard-bottom-left-top-monitor-chart {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
background-color: @bg-color-container;
|
||||
border-radius: @border-radius;
|
||||
margin-left: 16px;
|
||||
width: 100%;
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
|
||||
/* 出入库概览（） */
|
||||
.dashboard-bottom-left-bottom {
|
||||
background-color: white;
|
||||
background-color: @bg-color-container;
|
||||
padding: 20px 24px;
|
||||
border-radius: @border-radius;
|
||||
margin-top: 16px;
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
/* 右边列表-实时热度趋势 */
|
||||
.dashboard-bottom-right {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
background-color: @bg-color-container;
|
||||
border-radius: @border-radius;
|
||||
margin-left: 16px;
|
||||
width: 426px;
|
||||
|
|
@ -307,23 +307,7 @@
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.card-container.main-color {
|
||||
background: @brand-color;
|
||||
color: @text-color-primary;
|
||||
|
||||
.card-describe {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-item-top span {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-item-block {
|
||||
color: rgb(255 255 255 / 55%);
|
||||
}
|
||||
|
||||
.dashboard-item-bottom {
|
||||
color: white;
|
||||
}
|
||||
.inner-card {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
<t-radio-button value="monthVal"> 季度 </t-radio-button>
|
||||
</t-radio-group>
|
||||
</template>
|
||||
<t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName">
|
||||
<t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName" :style="{ overflow: 'scroll' }">
|
||||
<template #index="{ rowIndex }">
|
||||
<span :class="getRankClass(rowIndex)">
|
||||
{{ rowIndex + 1 }}
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
<t-radio-button value="monthVal"> 季度 </t-radio-button>
|
||||
</t-radio-group>
|
||||
</template>
|
||||
<t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName">
|
||||
<t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName" :style="{ overflow: 'scroll' }">
|
||||
<template #index="{ rowIndex }">
|
||||
<span :class="getRankClass(rowIndex)">
|
||||
{{ rowIndex + 1 }}
|
||||
|
|
@ -167,15 +167,14 @@
|
|||
</card>
|
||||
</t-col>
|
||||
<t-col :xs="12" :xl="3">
|
||||
<div>
|
||||
<card :style="{ margin: '0 0 -40px 0' }">
|
||||
<template #option>
|
||||
<t-button>导出数据</t-button>
|
||||
</template>
|
||||
</card>
|
||||
|
||||
<t-row>
|
||||
<t-col :xs="6" :xl="12">
|
||||
<card describe="本月出库总计（件）" :style="{ height: '168px' }" size="small">
|
||||
<card describe="本月出库总计（件）" class="inner-card" size="small">
|
||||
<div class="dashboard-item">
|
||||
<div class="dashboard-item-top">
|
||||
<span>1726</span>
|
||||
|
|
@ -191,7 +190,7 @@
|
|||
</t-col>
|
||||
|
||||
<t-col :xs="6" :xl="12">
|
||||
<card describe="本月入库总计（件）" :style="{ height: '168px' }" size="small">
|
||||
<card describe="本月入库总计（件）" class="inner-card" size="small">
|
||||
<div class="dashboard-item">
|
||||
<div class="dashboard-item-top">
|
||||
<span>226</span>
|
||||
|
|
@ -206,7 +205,7 @@
|
|||
</card>
|
||||
</t-col>
|
||||
</t-row>
|
||||
</div>
|
||||
</card>
|
||||
</t-col>
|
||||
</t-row>
|
||||
</div>
|
||||
|
|
@ -315,6 +314,32 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import url('./index.less');
|
||||
<style lang="less" scoped>
|
||||
@import './index.less';
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
@import '@/style/variables.less';
|
||||
|
||||
.card-container.main-color {
|
||||
background: @brand-color;
|
||||
color: @text-color-primary;
|
||||
|
||||
.card-describe {
|
||||
color: @text-color-anti;
|
||||
}
|
||||
|
||||
.dashboard-item-top span {
|
||||
color: @text-color-anti;
|
||||
}
|
||||
|
||||
.dashboard-item-block {
|
||||
color: @text-color-anti;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.dashboard-item-bottom {
|
||||
color: @text-color-anti;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,14 +34,14 @@
|
|||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
color: rgba(0,0,0,.90);
|
||||
color: rgb(0 0 0 / 90%);
|
||||
font-weight: 500;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.30);
|
||||
color: rgb(0 0 0 / 30%);
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.40);
|
||||
color: rgb(0 0 0 / 40%);
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
|
||||
|
|
@ -63,14 +63,12 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.dashboard-detail-bottom-container {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
border-radius: @border-radius;
|
||||
margin-top: 16px;
|
||||
min-height: 400px;
|
||||
|
||||
}
|
||||
|
||||
.trend-container {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="dashboard-panel-detail">
|
||||
<card title="本月采购申请情况">
|
||||
<t-row :gutter="16">
|
||||
<t-row :gutter="[16, 16]">
|
||||
<t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3">
|
||||
<div class="dashboard-detail-container-item">
|
||||
<span>{{ item.title }}</span>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '@/style/index';
|
||||
@import '@/style/variables.less';
|
||||
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
|
|
@ -52,26 +52,15 @@
|
|||
}
|
||||
|
||||
.form-basic-item {
|
||||
// padding: 0 60px 0 160px;
|
||||
|
||||
.form-basic-container-title {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
color: rgba(0, 0, 0, .9);
|
||||
color: @text-color-primary;
|
||||
padding: 64px 0 32px 0;
|
||||
}
|
||||
|
||||
// .t-size-m {
|
||||
// width: 100% !important;
|
||||
// min-width: 280px;
|
||||
// }
|
||||
|
||||
// .t-form-item__type {
|
||||
// // width: 100% !important;
|
||||
// min-width: 280px;
|
||||
// }
|
||||
}
|
||||
|
||||
.tdesign-pro-panel {
|
||||
|
|
@ -84,7 +73,7 @@
|
|||
|
||||
.form-cretifier {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
color: @text-color-primary;;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 130px;
|
||||
|
||||
|
|
@ -147,7 +136,7 @@
|
|||
.form-submit-upload-span {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
color: @text-color-placeholder;
|
||||
padding-top: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div :class="`${PREFIX}-search-input`">
|
||||
<t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
|
||||
<template #suffix-icon>
|
||||
<t-icon-search size="20px" />
|
||||
<search-icon size="20px" />
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import TIconSearch from 'tdesign-vue-next/lib/icon/search';
|
||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
|
||||
import { PREFIX } from '@/config/global';
|
||||
|
|
@ -81,7 +81,7 @@ import { COLUMNS } from './constants';
|
|||
export default defineComponent({
|
||||
name: 'ListBaseCard',
|
||||
components: {
|
||||
TIconSearch,
|
||||
SearchIcon,
|
||||
Trend,
|
||||
},
|
||||
setup() {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="list-card-item_detail">
|
||||
<t-row justify="space-between">
|
||||
<div :class="cardLogoClass">
|
||||
<t-icon-shop v-if="product.type === 1" />
|
||||
<t-icon-calendar v-if="product.type === 2" />
|
||||
<t-icon-service v-if="product.type === 3" />
|
||||
<t-icon-user-avatar v-if="product.type === 4" />
|
||||
<t-icon-laptop v-if="product.type === 5" />
|
||||
<shop-icon v-if="product.type === 1" />
|
||||
<calendar-icon v-if="product.type === 2" />
|
||||
<service-icon v-if="product.type === 3" />
|
||||
<user-avatar-icon v-if="product.type === 4" />
|
||||
<laptop-icon v-if="product.type === 5" />
|
||||
</div>
|
||||
<p :class="cardStatusClass">
|
||||
{{ product.isSetup ? '已启用' : '已停用' }}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
{{ typeMap[product.type - 1] }}
|
||||
</t-button>
|
||||
<t-button shape="circle" :disabled="!product.isSetup">
|
||||
<t-icon-add />
|
||||
<add-icon />
|
||||
</t-button>
|
||||
</div>
|
||||
<t-dropdown
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<t-icon-more />
|
||||
<more-icon />
|
||||
</t-dropdown>
|
||||
</t-row>
|
||||
</div>
|
||||
|
|
@ -51,13 +51,15 @@
|
|||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from 'vue';
|
||||
import TIconShop from 'tdesign-vue-next/lib/icon/shop';
|
||||
import TIconCalendar from 'tdesign-vue-next/lib/icon/calendar';
|
||||
import TIconService from 'tdesign-vue-next/lib/icon/service';
|
||||
import TIconUserAvatar from 'tdesign-vue-next/lib/icon/user-avatar';
|
||||
import TIconLaptop from 'tdesign-vue-next/lib/icon/laptop';
|
||||
import TIconMore from 'tdesign-vue-next/lib/icon/more';
|
||||
import TIconAdd from 'tdesign-vue-next/lib/icon/add';
|
||||
import {
|
||||
ShopIcon,
|
||||
CalendarIcon,
|
||||
ServiceIcon,
|
||||
UserAvatarIcon,
|
||||
LaptopIcon,
|
||||
MoreIcon,
|
||||
AddIcon,
|
||||
} from 'tdesign-icons-vue-next';
|
||||
|
||||
export interface CardProductType {
|
||||
type: number;
|
||||
|
|
@ -69,13 +71,13 @@ export interface CardProductType {
|
|||
export default defineComponent({
|
||||
name: 'ListCardComponent',
|
||||
components: {
|
||||
TIconShop,
|
||||
TIconCalendar,
|
||||
TIconService,
|
||||
TIconUserAvatar,
|
||||
TIconLaptop,
|
||||
TIconMore,
|
||||
TIconAdd,
|
||||
ShopIcon,
|
||||
CalendarIcon,
|
||||
ServiceIcon,
|
||||
UserAvatarIcon,
|
||||
LaptopIcon,
|
||||
MoreIcon,
|
||||
AddIcon,
|
||||
},
|
||||
props: {
|
||||
product: {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div :class="PREFIX + '-search-input'">
|
||||
<t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
|
||||
<template #suffix-icon>
|
||||
<t-icon-search v-if="searchValue === ''" size="20px" />
|
||||
<search-icon v-if="searchValue === ''" size="20px" />
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, onMounted } from 'vue';
|
||||
import TIconSearch from 'tdesign-vue-next/lib/icon/search';
|
||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import { PREFIX } from '@/config/global';
|
||||
import Card from './components/Card.vue';
|
||||
|
|
@ -78,7 +78,7 @@ const INITIAL_DATA = {
|
|||
export default defineComponent({
|
||||
name: 'ListBase',
|
||||
components: {
|
||||
TIconSearch,
|
||||
SearchIcon,
|
||||
Card,
|
||||
DialogForm,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
<t-button type="reset" variant="base" theme="default"> 重置 </t-button>
|
||||
<div class="expand" @click="toggleExpand">
|
||||
{{ isExpand ? '收起' : '展开'
|
||||
}}<t-icon-chevron-down size="20" :style="{ transform: `rotate(${isExpand ? '180deg' : '0'}` }" />
|
||||
}}<chevron-down-icon size="20" :style="{ transform: `rotate(${isExpand ? '180deg' : '0'}` }" />
|
||||
</div>
|
||||
</t-form-item>
|
||||
</div>
|
||||
|
|
@ -102,8 +102,8 @@
|
|||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, onMounted } from 'vue';
|
||||
import TIconChevronDown from 'tdesign-vue-next/lib/icon/chevron-down';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import { ChevronDownIcon } from 'tdesign-icons-vue-next';
|
||||
import { PREFIX } from '@/config/global';
|
||||
import Trend from '@/components/trend/index.vue';
|
||||
import { COLUMNS } from './constants';
|
||||
|
|
@ -129,7 +129,7 @@ export default defineComponent({
|
|||
name: 'ListTable',
|
||||
components: {
|
||||
Trend,
|
||||
TIconChevronDown,
|
||||
ChevronDownIcon,
|
||||
},
|
||||
setup() {
|
||||
const formData = ref({ ...searchForm });
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="list-tree-operator">
|
||||
<t-input v-model="filterText" placeholder="请输入关键词" @input="onInput">
|
||||
<template #suffix-icon>
|
||||
<t-icon-search size="20px" />
|
||||
<search-icon size="20px" />
|
||||
</template>
|
||||
</t-input>
|
||||
<t-tree :data="TREE_DATA" hover expand-on-click-node :default-expanded="expanded" :filter="filterByText" />
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import TIconSearch from 'tdesign-vue-next/lib/icon/search';
|
||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||
import { PREFIX } from '@/config/global';
|
||||
|
||||
import { TREE_DATA } from './constants';
|
||||
|
|
@ -26,7 +26,7 @@ import ListCommonTable from '../components/Table.vue';
|
|||
export default defineComponent({
|
||||
name: 'ListTree',
|
||||
components: {
|
||||
TIconSearch,
|
||||
SearchIcon,
|
||||
ListCommonTable,
|
||||
},
|
||||
setup() {
|
||||
|
|
|
|||
78
src/pages/login/components/Header.vue
Normal file
78
src/pages/login/components/Header.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<header class="login-header">
|
||||
<logo-full-icon class="logo" />
|
||||
<div class="operations-container">
|
||||
<t-button theme="default" shape="square" variant="text" @click="navToGitHub">
|
||||
<t-icon name="logo-github" class="icon" />
|
||||
</t-button>
|
||||
<t-button theme="default" shape="square" variant="text" @click="navToHelper">
|
||||
<t-icon name="help-circle" class="icon" />
|
||||
</t-button>
|
||||
<t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
|
||||
<t-icon name="setting" class="icon" />
|
||||
</t-button>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import LogoFullIcon from '@/assets/logo-full.svg?component';
|
||||
|
||||
export default defineComponent({
|
||||
components: { LogoFullIcon },
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const toggleSettingPanel = () => {
|
||||
store.commit('setting/toggleSettingPanel', true);
|
||||
};
|
||||
|
||||
const navToGitHub = () => {
|
||||
window.open('https://github.com/TDesignOteam/tdesign-vue-next-starter');
|
||||
};
|
||||
|
||||
const navToHelper = () => {
|
||||
window.open('http://tdesign.tencent.com/starter/get-started.html');
|
||||
};
|
||||
|
||||
return {
|
||||
toggleSettingPanel,
|
||||
navToGitHub,
|
||||
navToHelper,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
.login-header {
|
||||
height: 64px;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(5px);
|
||||
color: @text-color-primary;
|
||||
|
||||
.operations-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.t-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 6px;
|
||||
box-sizing: content-box;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<!-- 密码登陆 -->
|
||||
<t-form
|
||||
ref="form"
|
||||
:class="['item-container', `login-${type}`]"
|
||||
|
|
@ -43,8 +42,8 @@
|
|||
<!-- 扫码登陆 -->
|
||||
<template v-else-if="type == 'qrcode'">
|
||||
<div class="tip-container">
|
||||
<span class="tip1">请使用微信扫一扫登录</span>
|
||||
<span class="tip2 refresh">刷新 <t-icon name="refresh" color="#0052D9" /> </span>
|
||||
<span class="tip">请使用微信扫一扫登录</span>
|
||||
<span class="refresh">刷新 <t-icon name="refresh" color="#0052D9" /> </span>
|
||||
</div>
|
||||
<qrcode-vue value="" :size="192" level="H" />
|
||||
</template>
|
||||
|
|
@ -67,7 +66,7 @@
|
|||
</t-form-item>
|
||||
</template>
|
||||
|
||||
<t-form-item v-if="type !== 'qrcode'">
|
||||
<t-form-item v-if="type !== 'qrcode'" class="btn-container">
|
||||
<t-button block size="large" type="submit"> 登录 </t-button>
|
||||
</t-form-item>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,13 +9,7 @@
|
|||
>
|
||||
<template v-if="type == 'phone'">
|
||||
<t-form-item name="phone">
|
||||
<t-input
|
||||
v-model="formData.phone"
|
||||
:maxlength="11"
|
||||
style="width: 400px"
|
||||
size="large"
|
||||
placeholder="请输入您的手机号"
|
||||
>
|
||||
<t-input v-model="formData.phone" :maxlength="11" size="large" placeholder="请输入您的手机号">
|
||||
<template #prefix-icon>
|
||||
<t-icon name="user" />
|
||||
</template>
|
||||
|
|
@ -25,19 +19,11 @@
|
|||
|
||||
<template v-if="type == 'email'">
|
||||
<t-form-item name="email">
|
||||
<t-select
|
||||
v-model="formData.email"
|
||||
placeholder="请输入您的邮箱"
|
||||
filterable
|
||||
size="large"
|
||||
:empty="''"
|
||||
:options="emailOptions"
|
||||
:on-search="remoteMethod"
|
||||
>
|
||||
<template #t-input>
|
||||
<t-icon name="lock-on" />
|
||||
<t-input v-model="formData.email" type="text" size="large" placeholder="请输入您的邮箱">
|
||||
<template #prefix-icon>
|
||||
<t-icon name="mail" />
|
||||
</template>
|
||||
</t-select>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
</template>
|
||||
|
||||
|
|
@ -88,7 +74,7 @@
|
|||
import { defineComponent, ref } from 'vue';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import { useCounter } from '@/utils/hooks';
|
||||
import { passwordValidator, getEmails } from '../helper';
|
||||
import { passwordValidator } from '../helper';
|
||||
|
||||
const INITIAL_DATA = {
|
||||
phone: '',
|
||||
|
|
@ -100,7 +86,10 @@ const INITIAL_DATA = {
|
|||
|
||||
const FORM_RULES = {
|
||||
phone: [{ required: true, message: '手机号必填', type: 'error' }],
|
||||
email: [{ required: true, email: true, message: '邮箱必填', type: 'error' }],
|
||||
email: [
|
||||
{ required: true, message: '邮箱必填', type: 'error' },
|
||||
{ email: true, message: '请输入正确的邮箱', type: 'warning' },
|
||||
],
|
||||
password: [{ required: true, message: '密码必填', type: 'error' }, { validator: passwordValidator }],
|
||||
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
|
||||
};
|
||||
|
|
@ -109,11 +98,6 @@ export default defineComponent({
|
|||
setup(props, ctx) {
|
||||
const type = ref('phone');
|
||||
const emailOptions = ref([]);
|
||||
const remoteMethod = (search: string) => {
|
||||
if (search && search.indexOf('@') === -1) {
|
||||
emailOptions.value = getEmails(search);
|
||||
}
|
||||
};
|
||||
|
||||
const form = ref();
|
||||
const formData = ref({ ...INITIAL_DATA });
|
||||
|
|
@ -146,7 +130,6 @@ export default defineComponent({
|
|||
form,
|
||||
type,
|
||||
emailOptions,
|
||||
remoteMethod,
|
||||
countDown,
|
||||
handleCounter,
|
||||
onSubmit,
|
||||
|
|
|
|||
|
|
@ -8,34 +8,6 @@ export const passwordValidator = (val) => {
|
|||
return { result: true };
|
||||
};
|
||||
|
||||
export const getEmails = (search) => [
|
||||
{
|
||||
value: `${search}@qq.com`,
|
||||
label: `${search}@qq.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@gmail.com`,
|
||||
label: `${search}@gmail.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@126.com`,
|
||||
label: `${search}@126.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@163.com`,
|
||||
label: `${search}@163.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@21cn.com`,
|
||||
label: `${search}@21cn.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@yahoo.com`,
|
||||
label: `${search}@yahoo.com`,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
passwordValidator,
|
||||
getEmails,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,22 @@
|
|||
@import '@/style/index';
|
||||
@import '@/style/variables.less';
|
||||
|
||||
&.light {
|
||||
.login-wrapper {
|
||||
background-color: white;
|
||||
background-image: url('@/assets/login-bg-white.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
.login-wrapper {
|
||||
background-color: @bg-color-page;
|
||||
background-image: url('@/assets/login-bg-black.png');
|
||||
}
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('https://tdesign.gtimg.com/pro-template/login-bg-img.jpg');
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
position: relative;
|
||||
|
|
@ -11,53 +24,73 @@
|
|||
|
||||
.login-container {
|
||||
position: absolute;
|
||||
top: 28%;
|
||||
left: 12%;
|
||||
top: 14%;
|
||||
left: 5%;
|
||||
min-height: 500px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
.icon {
|
||||
width: 290px;
|
||||
height: 40px;
|
||||
width: 56px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.side-title {
|
||||
margin-top: 24.9px;
|
||||
.title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
color: @text-color-primary;
|
||||
margin-top: 4px;
|
||||
|
||||
.tip1,
|
||||
.tip2 {
|
||||
&.margin-no {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin-top: 16px;
|
||||
|
||||
.tip {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
&:first-child {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
.tip2 {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
&:last-child {
|
||||
color: @text-color-primary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-container {
|
||||
width: 400px;
|
||||
margin-top: 64px;
|
||||
margin-top: 48px;
|
||||
|
||||
&.login-qrcode {
|
||||
margin-top: 34px;
|
||||
|
||||
.tip-container {
|
||||
width: 192px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.tip {
|
||||
color: @text-color-primary;
|
||||
}
|
||||
|
||||
.refresh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @brand-color;
|
||||
|
||||
.t-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -76,14 +109,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.register-phone {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-select-popup-reference {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.check-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -98,7 +123,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
color: @brand-color;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -106,26 +131,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tip-container {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
.tip2 {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
|
||||
.t-icon {
|
||||
height: 20px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -141,10 +146,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
margin-top: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-container {
|
||||
margin-top: 66px;
|
||||
margin-top: 24px;
|
||||
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
|
|
@ -173,7 +182,7 @@
|
|||
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
color: rgb(0 0 0 / 60%);
|
||||
color: @text-color-secondary;
|
||||
|
||||
.tip {
|
||||
float: right;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,32 @@
|
|||
<template>
|
||||
<div class="login-wrapper">
|
||||
<login-header />
|
||||
|
||||
<div class="login-container">
|
||||
<div class="title-container">
|
||||
<img class="icon" src="https://tdesign.gtimg.com/starter/logo%402x.png" />
|
||||
<div class="side-title">
|
||||
<p class="tip1">
|
||||
{{ type == 'register' ? '没有账号吗?' : '已有账号?' }}
|
||||
</p>
|
||||
<p class="tip2" @click="switchType(type == 'register' ? 'login' : 'register')">
|
||||
<img class="icon" src="../../assets/t-logo.svg" />
|
||||
<h1 class="title margin-no">登录到</h1>
|
||||
<h1 class="title">TDesign Starter</h1>
|
||||
<div class="sub-title">
|
||||
<p class="tip">{{ type == 'register' ? '已有账号?' : '没有账号吗?' }}</p>
|
||||
<p class="tip" @click="switchType(type == 'register' ? 'login' : 'register')">
|
||||
{{ type == 'register' ? '登录' : '注册新账号' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<login v-if="type === 'login'" />
|
||||
<register v-else @registerSuccess="switchType('login')" />
|
||||
<register v-else @register-success="switchType('login')" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import Login from './components/Login.vue';
|
||||
import Register from './components/Register.vue';
|
||||
import LoginHeader from './components/Header.vue';
|
||||
|
||||
/** 高级详情 */
|
||||
export default defineComponent({
|
||||
|
|
@ -29,17 +34,23 @@ export default defineComponent({
|
|||
components: {
|
||||
Login,
|
||||
Register,
|
||||
LoginHeader,
|
||||
},
|
||||
setup() {
|
||||
const type = ref('login');
|
||||
|
||||
const store = useStore();
|
||||
const switchType = (val: string) => {
|
||||
type.value = val;
|
||||
};
|
||||
|
||||
const mode = computed(() => {
|
||||
return store.state.setting.mode;
|
||||
});
|
||||
|
||||
return {
|
||||
type,
|
||||
switchType,
|
||||
mode,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -40,22 +40,22 @@ export const USER_INFO_LIST = [
|
|||
|
||||
export const TEAM_MEMBERS = [
|
||||
{
|
||||
avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar5.png',
|
||||
avatar: 'https://avatars.githubusercontent.com/u/972985?s=70&v=4',
|
||||
title: 'Lovellzhang 张庆霖',
|
||||
description: '直客销售 港澳拓展组员工',
|
||||
},
|
||||
{
|
||||
avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar1.png',
|
||||
avatar: 'https://avatars.githubusercontent.com/u/7600149?s=70&v=4',
|
||||
title: 'Jiajingwang 王佳静',
|
||||
description: '前端开发 前台研发组员工',
|
||||
},
|
||||
{
|
||||
avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar5.png',
|
||||
avatar: 'https://avatars.githubusercontent.com/u/24469546?s=96&v=4',
|
||||
title: 'cruisezhang 张超',
|
||||
description: '技术产品 产品组员工',
|
||||
},
|
||||
{
|
||||
avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar3.png',
|
||||
avatar: 'https://avatars.githubusercontent.com/u/88708072?s=96&v=4',
|
||||
title: 'Lovellzhang 张庆霖',
|
||||
description: '产品运营 港澳拓展组员工',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,21 +2,19 @@
|
|||
|
||||
.user-panel {
|
||||
@media (max-width: @screen-sm-max) {
|
||||
|
||||
.user-right {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
|
||||
.user-right {
|
||||
min-width: 33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-right {
|
||||
transition: width .3s linear;
|
||||
transition: width 0.3s linear;
|
||||
|
||||
&-greeting {
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -52,7 +50,7 @@
|
|||
|
||||
.t-icon {
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, .9);
|
||||
color: rgb(0 0 0 / 90%);
|
||||
}
|
||||
|
||||
.more {
|
||||
|
|
@ -77,7 +75,6 @@
|
|||
}
|
||||
|
||||
.user-right-panel {
|
||||
|
||||
.user-top {
|
||||
padding: 48px;
|
||||
margin: 0 0 16px 16px;
|
||||
|
|
@ -139,7 +136,7 @@
|
|||
}
|
||||
|
||||
.user-middle {
|
||||
padding: 28px 32px 5px 32px;
|
||||
padding: 28px 32px 5px;
|
||||
margin: 0 0 16px 16px;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
|
|
@ -159,21 +156,21 @@
|
|||
|
||||
.t-list-item__meta-description {
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
color: rgb(0 0 0 / 40%);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-bottom {
|
||||
padding: 24px 24px 5px 24px;
|
||||
padding: 24px 24px 5px;
|
||||
margin: 0 0 16px 16px;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.content {
|
||||
width: 70%;
|
||||
margin: 24px 0 12px 0;
|
||||
margin: 24px 0 12px;
|
||||
}
|
||||
|
||||
.user-right-logo {
|
||||
|
|
@ -183,9 +180,7 @@
|
|||
}
|
||||
|
||||
.user-left-panel {
|
||||
|
||||
.user-top {
|
||||
|
||||
.user-left-greeting {
|
||||
padding: 28px 32px;
|
||||
line-height: 28px;
|
||||
|
|
@ -195,6 +190,13 @@
|
|||
text-align: left;
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.user-left-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.regular {
|
||||
margin: 0 0 0 15px;
|
||||
|
|
@ -230,10 +232,10 @@
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 24px;
|
||||
margin: 20px 0 6px 0;
|
||||
margin: 20px 0 6px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
color: rgb(0 0 0 / 40%);
|
||||
}
|
||||
|
||||
&-detail {
|
||||
|
|
@ -243,7 +245,7 @@
|
|||
line-height: 40px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, .9);
|
||||
color: rgb(0 0 0 / 90%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -254,7 +256,7 @@
|
|||
}
|
||||
|
||||
.user-bottom {
|
||||
margin: 0 0 16px 0;
|
||||
margin: 0 0 16px;
|
||||
padding: 28px 32px;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
|
|
@ -265,7 +267,7 @@
|
|||
.unit {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
color: rgb(0 0 0 / 40%);
|
||||
}
|
||||
|
||||
.time-picker {
|
||||
|
|
@ -276,4 +278,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@
|
|||
<t-col class="user-left-panel" :flex="3">
|
||||
<div class="user-top">
|
||||
<div class="user-left-greeting">
|
||||
<div class="user-left-content">
|
||||
Hi，Image
|
||||
<span class="regular"> 下午好，今天是你加入鹅厂的第 100 天～</span>
|
||||
</div>
|
||||
<img src="../../assets/tencent-logo.png" class="user-left-logo" />
|
||||
</div>
|
||||
<div class="user-right-info">
|
||||
|
|
@ -46,7 +48,7 @@
|
|||
@change="onLineChange"
|
||||
/>
|
||||
</div>
|
||||
<div id="lineContainer" style="width: 100%; height: 330px" />
|
||||
<!-- <div id="lineContainer" style="width: 100%; height: 330px" /> -->
|
||||
</div>
|
||||
</t-tab-panel>
|
||||
<t-tab-panel value="third" label="内容列表">
|
||||
|
|
@ -60,7 +62,7 @@
|
|||
<t-col class="user-right-panel" :flex="1">
|
||||
<div class="user-top">
|
||||
<div class="account">
|
||||
<img class="img" src="https://tdesign.gtimg.com/pro-template/personal/avatar4.png" />
|
||||
<t-avatar size="90px">T</t-avatar>
|
||||
<div class="name">My Account</div>
|
||||
<div class="position">XXG 港澳业务拓展组员工 直客销售</div>
|
||||
</div>
|
||||
|
|
@ -95,7 +97,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, watch } from 'vue';
|
||||
import { defineComponent, onMounted, watch, nextTick } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import * as echarts from 'echarts/core';
|
||||
|
|
@ -112,22 +114,25 @@ echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendC
|
|||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const lineChart = useChart('lineContainer');
|
||||
let lineChart;
|
||||
// nextTick(() => {
|
||||
// lineChart = useChart('lineContainer');
|
||||
// });
|
||||
|
||||
const onLineChange = (value: string[]) => {
|
||||
lineChart.value.setOption(getFolderLineDataSet(value));
|
||||
// lineChart.value.setOption(getFolderLineDataSet(value));
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
lineChart.value.setOption({
|
||||
grid: {
|
||||
x: 30, // 默认是80px
|
||||
y: 30, // 默认是60px
|
||||
x2: 10, // 默认80px
|
||||
y2: 30, // 默认60px
|
||||
},
|
||||
...getFolderLineDataSet(),
|
||||
});
|
||||
// lineChart.value.setOption({
|
||||
// grid: {
|
||||
// x: 30, // 默认是80px
|
||||
// y: 30, // 默认是60px
|
||||
// x2: 10, // 默认80px
|
||||
// y2: 30, // 默认60px
|
||||
// },
|
||||
// ...getFolderLineDataSet(),
|
||||
// });
|
||||
});
|
||||
|
||||
const store = useStore();
|
||||
|
|
|
|||
31
src/router/modules/components.ts
Normal file
31
src/router/modules/components.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import layouts from "@/layouts"
|
||||
|
||||
export default [{
|
||||
path: '/list',
|
||||
icon: 'view-module',
|
||||
title: '列表页',
|
||||
component: layouts,
|
||||
redirect: '/list/base',
|
||||
children: [
|
||||
{
|
||||
title: '基础列表页',
|
||||
path: 'base',
|
||||
component: '../pages/list/base/index.vue',
|
||||
},
|
||||
{
|
||||
title: '卡片列表页',
|
||||
path: 'card',
|
||||
component: '../pages/list/card/index.vue',
|
||||
},
|
||||
{
|
||||
title: '筛选列表页',
|
||||
path: 'filter',
|
||||
component: '../pages/list/filter/index.vue',
|
||||
},
|
||||
{
|
||||
title: '树状筛选列表页',
|
||||
path: 'tree',
|
||||
component: '../pages/list/tree/index.vue',
|
||||
},
|
||||
],
|
||||
},]
|
||||
|
|
@ -65,18 +65,36 @@ const getters = {
|
|||
},
|
||||
showFooter: (state) => state.showFooter,
|
||||
showSettingBtn: (state) => !state.showHeader,
|
||||
mode: (state) => {
|
||||
if (state.mode === 'auto') {
|
||||
const media = window.matchMedia('(prefers-color-scheme:dark)');
|
||||
if (media.matches) {
|
||||
return 'dark';
|
||||
}
|
||||
return 'light';
|
||||
}
|
||||
return state.mode
|
||||
}
|
||||
};
|
||||
|
||||
const actions = {
|
||||
async changeTheme({ commit, dispatch }, payload) {
|
||||
console.log(payload);
|
||||
dispatch('changeMode', payload);
|
||||
dispatch('changeBrandTheme', payload);
|
||||
commit('update', payload);
|
||||
},
|
||||
changeMode({ state }, payload) {
|
||||
if (payload.mode !== state.mode) {
|
||||
document.documentElement.setAttribute('theme-mode', payload.mode === 'dark' ? 'dark' : '');
|
||||
let theme = payload.mode;
|
||||
if (payload.mode === 'auto') {
|
||||
const media = window.matchMedia('(prefers-color-scheme:dark)');
|
||||
if (media.matches) {
|
||||
theme = 'dark';
|
||||
} else {
|
||||
theme = 'light';
|
||||
}
|
||||
}
|
||||
if (theme !== state.mode) {
|
||||
document.documentElement.setAttribute('theme-mode', theme === 'dark' ? 'dark' : '');
|
||||
}
|
||||
},
|
||||
changeBrandTheme({ state }, payload) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
@import './variables.less';
|
||||
@import './font-family.less';
|
||||
|
||||
@menu-bg-color: #232A35;
|
||||
@menu-bg-hover-color: #2c3645;
|
||||
|
||||
.@{prefix} {
|
||||
&-sidebar-layout {
|
||||
height: 100%;
|
||||
|
|
@ -94,6 +97,32 @@
|
|||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.light {
|
||||
.t-default-menu.t-menu--dark {
|
||||
background: #232A35
|
||||
background: @menu-bg-color
|
||||
}
|
||||
|
||||
.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) {
|
||||
background: @menu-bg-hover-color;
|
||||
}
|
||||
.t-default-menu.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) {
|
||||
background: @menu-bg-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.t-default-menu.t-menu--dark {
|
||||
background: @bg-color-container;
|
||||
}
|
||||
}
|
||||
|
||||
.version-container {
|
||||
color: @text-color-anti;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.t-default-menu__inner .t-menu-group-title {
|
||||
color: @text-color-anti;
|
||||
opacity: 0.3;
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -248,3 +248,5 @@
|
|||
@z-index-message: 5000;
|
||||
@z-index-Popup: 5500;
|
||||
@z-index-Notification: 6000;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ export const useChart = (domId: string): Ref<echarts.ECharts> => {
|
|||
let chartContainer: HTMLCanvasElement;
|
||||
const selfChart = ref<echarts.ECharts | any>();
|
||||
const updateContainer = () => {
|
||||
selfChart.value.resize({
|
||||
width: chartContainer.clientWidth,
|
||||
height: chartContainer.clientHeight,
|
||||
});
|
||||
// selfChart.value.resize({
|
||||
// width: chartContainer.clientWidth,
|
||||
// height: chartContainer.clientHeight,
|
||||
// });
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user