update

Author: dirkhe1051931999

src/components/confirmDialog/index.vue

@@ -103,7 +103,7 @@ export default class dialogConfirmComponent extends Vue {
  }
  }
  .content {
- padding: 16px 22px 16px 24px;
+ padding: 16px;
  font-size: 14px;
  line-height: 21px;
  }

src/components/myBanner/index.vue

@@ -1,5 +1,10 @@
 <template>
- <q-banner dense class="my-banner" v-show="show" :class="bannerType">
+ <q-banner
+ dense
+ class="my-banner"
+ v-show="show"
+ :class="[bannerType, showClose ? 'p-r-32' : 'p-r-16']"
+ >
  <template v-slot:avatar>
  <q-icon
  name="info"
@@ -15,8 +20,8 @@
  />
  </template>
  <div class="content" :id="bid + '-' + bannerType + '-banner-content'"></div>
- <div class="close" @click.prevent.stop="show = false" v-if="showCLose">
- <q-icon name="app:navigation-close"></q-icon>
+ <div class="close" @click.prevent.stop="show = false" v-if="showClose">
+ <q-icon name="cancel"></q-icon>
  </div>
  </q-banner>
 </template>
@@ -28,7 +33,7 @@ import { Component, Prop, Vue } from 'vue-facing-decorator';
 export default class BannerComponent extends Vue {
  @Prop({ default: '' }) content!: string;
  @Prop({ default: '' }) bid!: string;
- @Prop({ default: false }) showCLose?: boolean;
+ @Prop({ default: false }) showClose?: boolean;
  @Prop({ default: 'success' }) bannerType!: string;
  public show = true;
  mounted() {
@@ -47,7 +52,9 @@ export default class BannerComponent extends Vue {
 <style lang="scss" scoped>
 .my-banner {
  border-radius: 8px;
- padding: 12px 16px;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ padding-left: 16px;
  position: relative;
  &.warn {
  background: $yellow-1;
@@ -62,18 +69,22 @@ export default class BannerComponent extends Vue {
  border: 1px solid rgba($negative, 0.5);
  }
  &.primary {
- background: $blue-1;
+ background: rgba($blue, 0.2);
  border: 1px solid rgba($primary, 0.5);
  }
  .icon {
  font-size: 20px;
  }
  .close {
  position: absolute;
- right: 16px;
+ right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
+ color: $grey-5;
+ &:hover {
+ color: $grey-3;
+ }
  }
 }
 </style>

src/components/textToInput/index.vue

@@ -1,5 +1,11 @@
 <template>
- <q-input outlined class="text-to-input" v-model="text" :loading="_loading">
+ <q-input
+ outlined
+ class="text-to-input"
+ v-model="text"
+ :loading="_loading"
+ dense
+ >
  <template v-slot:append>
  <q-icon
  name="app:text-to-input-close"

src/css/lib/_utils.scss

@@ -184,6 +184,18 @@
  user-select: none;
  position: relative;
  &.outline {
+ background: #ffffff;
+ box-sizing: border-box;
+ font-family: NotoSansSC-SemiBold, NotoSansSC-Bold;
+ }
+ &.negative {
+ border: solid 1px $negative;
+ color: $negative;
+ background: #ffffff;
+ box-sizing: border-box;
+ font-family: NotoSansSC-SemiBold, NotoSansSC-Bold;
+ }
+ &.primary {
  border: solid 1px $primary;
  color: $primary;
  background: #ffffff;
@@ -214,6 +226,12 @@
  border-radius: 50%;
  background-color: $black;
  }
+ &.grey {
+ color: $grey;
+ &::before {
+ background-color: $grey;
+ }
+ }
  &.green {
  color: $green;
  &::before {

src/css/quasar.variables.scss

@@ -24,7 +24,7 @@ $negative-2: rgb(234, 6, 6, 0.08);
 $yellow: rgb(237, 106, 12);
 $yellow-1: rgb(253, 246, 236);
 $yellow-2: rgb(237, 106, 12, 0.08);
-$green: rgba(45, 166, 65, 1);
+$green: #2da641;
 $green-1: rgb(225, 243, 216);
 $green-2: rgb(103, 194, 58, 0.08);
 $grey: #969799;

src/index.template.html

@@ -41,9 +41,77 @@
  <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>map/china.js"></script>
  <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>three/threejs.js"></script>
  <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>three/orbit-controls.js"></script>
+ <style>
+ .q-spinner-html {
+ vertical-align: middle;
+ }
+ .q-spinner-mat-html {
+ animation: q-spin 2s linear infinite;
+ transform-origin: center center;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ color: #3b4170;
+ }
+ .q-spinner-mat-html .path {
+ stroke-dasharray: 1, 200 /* rtl:ignore */;
+ stroke-dashoffset: 0 /* rtl:ignore */;
+ animation: q-mat-dash 1.5s ease-in-out infinite;
+ }
+ @keyframes q-spin {
+ 0% {
+ transform: rotate3d(0, 0, 1, 0deg) /* rtl:ignore */;
+ }
+ 25% {
+ transform: rotate3d(0, 0, 1, 90deg) /* rtl:ignore */;
+ }
+ 50% {
+ transform: rotate3d(0, 0, 1, 180deg) /* rtl:ignore */;
+ }
+ 75% {
+ transform: rotate3d(0, 0, 1, 270deg) /* rtl:ignore */;
+ }
+ 100% {
+ transform: rotate3d(0, 0, 1, 359deg) /* rtl:ignore */;
+ }
+ }
+ @keyframes q-mat-dash {
+ 0% {
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -35px;
+ }
+ 100% {
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -124px;
+ }
+ }
+ </style>
  </head>
  <body>
  <!-- DO NOT touch the following DIV -->
- <div id="q-app"></div>
+ <div id="q-app">
+ <svg
+ class="q-spinner-html q-spinner-mat-html"
+ width="68"
+ height="68"
+ viewBox="25 25 50 50"
+ >
+ <circle
+ class="path"
+ cx="50"
+ cy="50"
+ r="20"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="5"
+ stroke-miterlimit="10"
+ ></circle>
+ </svg>
+ </div>
  </body>
 </html>

src/pages/components/color.vue

@@ -6,6 +6,25 @@
  }}</q-avatar>
  {{ item }}
  </q-chip>
+ <div class="row">
+ <div class="my-status grey">my-status grey</div>
+ <div class="my-status green">my-status green</div>
+ <div class="my-status red">my-status red</div>
+ <div class="my-status yellow">my-status yellow</div>
+ <div class="my-status blue">my-status blue</div>
+ </div>
+ <div class="row">
+ <span class="my-button outline primary">my-button outline primary</span>
+ <span class="my-button outline negative">my-button outline negative</span>
+ <span class="my-button disabled">my-button outline</span>
+ </div>
+ <div class="row">
+ <span class="my-label blue">my-label blue</span>
+ <span class="my-label green">my-label green</span>
+ <span class="my-label yellow">my-label yellow</span>
+ <span class="my-label red">my-label red</span>
+ <span class="my-label grey">my-label grey</span>
+ </div>
  </div>
 </template>
 

src/pages/components/notice.vue

@@ -1,5 +1,39 @@
 <template>
  <div class="q-pa-md q-gutter-y-sm column items-center">
+ <MyTooltip
+ content="tip tip tip tip tip tip tip tip tip tip tip tip tip tip tip tip"
+ style="width: 100px"
+ >
+ </MyTooltip>
+ <TextToInput
+ value="text text"
+ :that="textToInputThat"
+ :loading="textToInputLoading"
+ @confirm="textToInputConfirm"
+ @close="textToInputClose"
+ >
+ </TextToInput>
+ <MyBanner
+ content="ok ok ok ok ok ok ok ok ok ok ok ok"
+ bid="notice-banner-1"
+ bannerType="warn"
+ :showClose="true"
+ ></MyBanner>
+ <MyBanner
+ content="ok ok ok ok ok ok ok ok ok ok ok ok"
+ bid="notice-banner-2"
+ bannerType="success"
+ ></MyBanner>
+ <MyBanner
+ content="ok ok ok ok ok ok ok ok ok ok ok ok"
+ bid="notice-banner-3"
+ bannerType="negative"
+ ></MyBanner>
+ <MyBanner
+ content="ok ok ok ok ok ok ok ok ok ok ok ok"
+ bid="notice-banner-4"
+ bannerType="primary"
+ ></MyBanner>
  <div class="q-pa-md q-gutter-sm">
  <q-banner dense class="bg-primary text-white">
  Unfortunately, the credit card did not go through, please try again.
@@ -18,7 +52,6 @@
  <q-btn flat color="primary" label="Turn on Wifi" />
  </template>
  </q-banner>
-
  <q-banner dense inline-actions class="text-white bg-red">
  You have lost connection to the internet. This app is offline.
  <template v-slot:action>
@@ -205,6 +238,16 @@ const alerts = [
  name: 'myComponentNotice',
 })
 export default class myComponentNotice extends Vue {
+ private textToInputLoading = false;
+ private textToInputThat = { a: 1, b: 2 };
+ private textToInputConfirm({ value, that }: { value: string; that: any }) {
+ console.log(value);
+ console.log(that);
+ }
+ private textToInputClose({ value, that }: { value: string; that: any }) {
+ console.log(value);
+ console.log(that);
+ }
  private showNotif(position: any) {
  const { color, multiLine, icon, message, avatar } =
  alerts[Math.floor(Math.random() * 10) % alerts.length];

src/router/index.ts

@@ -5,8 +5,11 @@ import {
  createWebHistory,
 } from 'vue-router';
 import { constantRoutes } from './routes';
+import setting from 'src/setting.json';
 const router = createRouter({
- history: createWebHashHistory('/'),
+ history: createWebHashHistory(
+ process.env.NODE_ENV === 'production' ? setting.publicPath : '/'
+ ),
  routes: constantRoutes,
 });
 

src/router/routes.ts

@@ -19,7 +19,9 @@ import { PermissionModule } from 'src/store/modules/permission';
 */
 function redirect(to: any) {
  const routes = PermissionModule.routes;
- return `${routes[1].path}${routes[1].children![0].path ? '/' : ''}`;
+ return `${routes[1].path}${
+ routes[1] && routes[1].children && routes[1].children![0].path ? '/' : ''
+ }`;
 }
 export const constantRoutes: RouteRecordRaw[] = [
  {