浏览代码

代码上传

zhangqiOMG 2 年之前
父节点
当前提交
0c21f31756

+ 0 - 1
src/components/layout/modules/aside.vue

@@ -115,7 +115,6 @@ onMounted (()=>{
   font-size: 14px;
   text-align: center;
   line-height: 30px;
-  
 }
 .collapsed{
   display: block;

+ 1 - 1
src/components/layout/modules/header.vue

@@ -37,7 +37,7 @@
         </a-menu>
       </template>
     </a-dropdown>
-    <a-button type="text" @click="router.push('/shopCart')">
+    <a-button style="margin:0 10px;" type="text" @click="router.push('/shopCart')">
       购物车
       <template #icon>
         <ShoppingCartOutlined/>

+ 5 - 14
src/components/layout/modules/historyTabs.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="sw-tabs">
     <a-tabs v-model:activeKey="activeKey" size="small" hide-add type="card" :tabBarGutter="0"  @edit="onEdit" @change="onChange" :tabBarStyle="{margin:'0px 0px 0px -1px',border:'none'}">
-      <a-tab-pane v-for="pane in historyRoutes" :key="pane.meta.name" closable>
+      <a-tab-pane v-for="pane in historyRoutes" :key="pane.name" closable>
         <template #tab>
           {{pane.meta.title}}&emsp;
           <close-circle-outlined @click.stop="onEdit(pane)"/>
@@ -32,25 +32,16 @@ const onEdit = (val)=>{
 }
 const onChange = (val)=>{
   activeKey.value = val
-  router.push({name:val,meta:{keepAlive:true}})
+  let path = historyRoutes.value.filter(element => element.name == val)
+  router.push({name:path[0].name,query:path[0].query,meta:{keepAlive:false}})
 }
+
 router.beforeEach((to,from,next)=>{
   let rs = historyRoutes.value.some(item=>item.name == from.name)
-  if (rs) {
-    to.meta.keepAlive = true
-  } else {
-    to.meta.keepAlive = false
-  }
   rotTabs.saveRoute(to)
   store.appData(to.meta.name)
-  activeKey.value = to.meta.name
-  
+  activeKey.value = to.name
   next()
-
-})
-
-watch(() => router.currentRoute.value,(to, from) => {
-  
 })
 </script>
 <style scoped>

+ 5 - 9
src/components/listTemplate/index.vue

@@ -67,11 +67,14 @@
   import { storeToRefs } from 'pinia'
   import { useRouter,onBeforeRouteLeave } from "vue-router";
   import { useAuthStore } from '@/stores/modules/auth'
+  import { useColumnsStore } from '@/stores/modules/columns'
   import { useBaseStore } from '@/stores/modules/base'
   const store = useAuthStore()
+  const colStore = useColumnsStore()
   const base = useBaseStore()
   let { app } = storeToRefs(store)
-  let { PageUpParam,nowPageData,keyid,pageTotal,selectedColumns,fullscreen } = storeToRefs(base)
+  let { PageUpParam,nowPageData,keyid,pageTotal,fullscreen } = storeToRefs(base)
+  let { selectedColumns } = storeToRefs(colStore)
   const router = useRouter()
   const props = defineProps({
     param: Object,
@@ -114,12 +117,11 @@
         columns.value = utils.TBLayout(props.tableName)
       }
     }
-    base.getTableColumns(param)
+    colStore.setConfig(param)
   }
   const sort = ref([])
   const tableData = async ()=>{
     loading.value = true
-    console.log(props.param)
     const res = await Api.requested(props.param)
     dataSource.value = res.data
     total.value = res.total
@@ -153,7 +155,6 @@
   const setSearchParam = (title,value)=>{
     props.param.content.where.tablefilter = {}
     props.param.content.where.tablefilter[title] = value
-    console.log(props.param)
   }
 
   defineExpose({
@@ -163,9 +164,6 @@
     getTableLayout()
     props.noAutoQuery ? '' : tableData()
   })
-  onActivated (()=>{
-    getTableLayout()
-  })
   watch (() => selectedColumns.value,(n, o) => {
     columns.value = selectedColumns.value
   })
@@ -177,7 +175,6 @@
 .ant-table-small :deep td{
   font-size: 12px;
   min-width: 100px;
-  /* zoom:100% */
 }
 .ant-table-small :deep(.table-striped) td {
   background-color: #f8f9fd;
@@ -197,7 +194,6 @@
   text-align: right;
 }
 .ant-dropdown-link{
-  /* font-size: 12px; */
   color:#333
 }
 

+ 18 - 11
src/components/tableConfiguration/settingColumns.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-popover title="筛选列" trigger="click" placement="leftBottom" :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}">
+    <a-popover title="筛选列" trigger="click" placement="left" :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}">
       <template #content>
         <div style="width:150px">
           <a-checkbox-group v-model:value="checkedColumns" name="checkboxgroup" @change="onChange">
@@ -23,18 +23,17 @@
 
 <script setup>
   import { SettingOutlined,DragOutlined  } from '@ant-design/icons-vue';
-  import {defineProps,ref,computed,defineEmits,defineExpose,onMounted} from 'vue'
+  import {defineProps,ref,computed,defineEmits,defineExpose,onMounted,onActivated} from 'vue'
   import utils from '@/utils/utils'
   import { storeToRefs } from 'pinia'
-  import { useBaseStore } from '@/stores/modules/base'
+  import { useColumnsStore } from '@/stores/modules/columns'
   import { useAuthStore } from '@/stores/modules/auth'
-  const base = useBaseStore()
+  const colStore = useColumnsStore()
   const store = useAuthStore()
   let { app } = storeToRefs(store)
-  let { selectedColumns,columnsIndex } = storeToRefs(base)
+  let { checkedColumns,columnsIndex } = storeToRefs(colStore)
   const props = defineProps(['tableName','columns'])
   const emit = defineEmits(['change'])
-  const checkedColumns = ref([]) // 选中的列
   const columnsData = ref([]) // checkboxGroup数据
 
   /**
@@ -48,7 +47,7 @@
       tableName:props.tableName,
       app:app.value
     }
-    base.setTableColumns(param)
+    colStore.configToJson(param)
   }
   const draggedIndex = ref(0)
   const dragStart = (index)=> {
@@ -77,21 +76,29 @@
       tableName:props.tableName,
       app:app.value
     }
-    base.setTableColumns(param)
+    colStore.configToJson(param)
+
     draggedIndex.value = null;
     
   }
-  onMounted(async ()=>{
-    columnsData.value = utils.TBLayout(props.tableName).map(e=>{
+  const initData = () => {
+     columnsData.value = utils.TBLayout(props.tableName).map(e=>{
       return {
         label:e.title,
         value:e.dataIndex
       }
     })
     setTimeout(() => {
-      columnsData.value = columnsIndex.value.map((key) => columnsData.value.find((obj) => obj.value === key));
       checkedColumns.value = props.columns.map(e=>e.dataIndex)
+      if (colStore.sortTableColnums(`${app.value.systemappid}${props.tableName}`,columnsData.value) !== 'none')
+        return columnsData.value = colStore.sortTableColnums(`${app.value.systemappid}${props.tableName}`,columnsData.value)
     }, 1000);
+  }
+  onMounted(()=>{
+   initData()
+  })
+  onActivated (()=>{
+    initData()
   })
   defineExpose({
   })

+ 9 - 5
src/stores/modules/auth.js

@@ -83,7 +83,7 @@ export const useAuthStore = defineStore('auth', {
     },
     // 获取应用数据
     appData (appName) {
-      
+      console.log(appName,'appName')
       const findApp = (array, name) => {
         for (const item of array) {
           for (const module of item.modules) {
@@ -105,12 +105,14 @@ export const useAuthStore = defineStore('auth', {
         }
       })
       if (res.data.config) {
-        sessionStorage.setItem('customColumns',res.data.config)
+        sessionStorage.setItem('customConfig',res.data.config)
       } else {
-        sessionStorage.removeItem('customColumns')
+        sessionStorage.removeItem('customConfig')
       }
     },
-    // 设置默认账号
+    /**
+     * 设置默认账号
+     */
     defaultAccount (account,fn) {
       this.nowAccount = account
 
@@ -122,7 +124,9 @@ export const useAuthStore = defineStore('auth', {
 
       fn()
     },
-    //
+    /**
+     * 切换站点以后刷新数据
+     */
     reloadPage () {
       this.isRefresh = false
       setTimeout(() => {

+ 0 - 66
src/stores/modules/base.js

@@ -2,7 +2,6 @@ import { defineStore } from 'pinia'
 
 import { message } from 'ant-design-vue';
 import { useRouter } from "vue-router";
-import utils from '@/utils/utils'
 import Api from '@/api/api'
 // 第一个参数是应用程序中 store 的唯一 id
 export const useBaseStore = defineStore('base', {
@@ -18,10 +17,7 @@ export const useBaseStore = defineStore('base', {
       tableRecord:[], // 记录表格勾选状态
 
       colMap:new Map(),
-      selectedColumns:[],
-      columnsIndex:[],
       fullscreen:false,
-      time:null
     }
   },
   // 开启数据缓存
@@ -158,67 +154,5 @@ export const useBaseStore = defineStore('base', {
       this.pageTotal = res.pageTotal
       fn?fn():''
     },
-
-    /**
-     * 处理系统系统配置项
-     * @param setTableColumns 接收用户自定义配置数据
-     */
-    async saveConfig (config) {
-      const res = await Api.requested({
-        "classname": "sysmanage.develop.users.users",
-        "method": "updateClientConfig",
-        "content": {
-          "config": config
-        }
-      })
-    },
-    setTableColumns (param) {
-      let a = utils.TBLayout(param.tableName)
-      let b = param.checkedColumns
-      b = this.columnsIndex.filter(e=>b.includes(e))
-
-      this.selectedColumns = b.map((key) => a.find((obj) => obj.dataIndex === key));
-
-     
-      this.colMap.set(`${param.app.systemappid}${param.tableName}`, {selected: param.checkedColumns,index:this.columnsIndex})
-
-      const mapArray = Array.from(this.colMap);
-      sessionStorage.setItem('customColumns',JSON.stringify(mapArray))
-      if (this.time !== null) {
-        clearTimeout(this.time);
-      }
-      this.time = setTimeout(() => {
-        this.saveConfig('')
-      }, 2000);
-    },
-
-    /**
-     * 获取表格配置信息
-     */
-    getTableColumns (param) {
-      /**
-       * 获取表结构时先判断是否存在自定义数据,若有自定义数据则优先取该数据
-       * @param storedData 缓存中的map数据
-       */
-      const storedData = sessionStorage.getItem('customColumns');
-      if (storedData) {
-        const parsedData = JSON.parse(storedData)
-        this.colMap = new Map(parsedData)
-        if (this.colMap.has(`${param.app.systemappid}${param.tableName}`)) {
-          this.columnsIndex =  this.colMap.get(`${param.app.systemappid}${param.tableName}`).index
-
-          let a = utils.TBLayout(param.tableName)
-          let b = this.colMap.get(`${param.app.systemappid}${param.tableName}`).selected
-          b = this.columnsIndex.filter(e=>b.includes(e))
-          this.selectedColumns = b.map((key) => a.find((obj) => obj.dataIndex === key));
-        } else {
-          this.columnsIndex = utils.TBLayout(param.tableName).map(e=>e.dataIndex)
-          param.fn()
-        }
-      } else {
-        this.columnsIndex = utils.TBLayout(param.tableName).map(e=>e.dataIndex)
-        param.fn()
-      }
-    },
   }
 })

+ 118 - 0
src/stores/modules/columns.js

@@ -0,0 +1,118 @@
+import { defineStore } from 'pinia'
+import utils from '@/utils/utils'
+
+import Api from '@/api/api'
+
+import router from "@/router/index";
+// 第一个参数是应用程序中 store 的唯一 id
+export const useColumnsStore = defineStore('columnStore', {
+  state: () => {
+    return {
+      colIndex:[],
+      tableConfigs:{},
+      checkedColumns:[],
+      columnsIndex:[],
+      selectedColumns:[],
+      time:null
+    }
+  },
+  // 开启数据缓存
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        storage: localStorage,
+        paths: []
+      }
+    ]
+  },
+  getters:{},
+  actions:{
+    /**
+     * 获取配置数据
+     * @param columnsIndex 列索配置
+     * @param checkedColumns 选择配置
+     * @param tableName 表名称
+     * @param app 应用名称
+     */
+    configToJson ({columnsIndex,checkedColumns,tableName,app}) {
+      this.tableConfigs[`${app.systemappid}${tableName}`] = {
+        index:columnsIndex,
+        selected:checkedColumns
+      }
+      this.setColnums({columnsIndex,checkedColumns,tableName,app})
+      if (this.time !== null) {
+        clearTimeout(this.time)
+      }
+      this.time = setTimeout(() => {
+        this.saveConfig(JSON.stringify(this.tableConfigs))
+      }, 2000);
+
+      sessionStorage.setItem('customConfig',JSON.stringify(this.tableConfigs))
+    },
+    /**
+     * 根据获取到的排序重新排列表格列
+     * @param a 目标数组
+     * @param b 索引数组
+     */
+    sortTableColnums (ky,columnsData) {
+      let customConfig = sessionStorage.getItem('customConfig')
+      if (customConfig && customConfig[ky]) {
+        customConfig = JSON.parse(customConfig)
+        let a = columnsData
+        let b = []
+        b = customConfig[ky].index
+        const sortedA = b.map((key) => a.find((item) => item.value === key));
+        return sortedA
+      } else {
+        return 'none'
+      }
+    },
+     /**
+     * 处理系统系统配置项
+     */
+    async saveConfig (config) {
+      const res = await Api.requested({
+        "classname": "sysmanage.develop.users.users",
+        "method": "updateClientConfig",
+        "content": {
+          "config": config
+        }
+      })
+    },
+    /**
+     * 获取系统配置
+     */
+    async setConfig ({tableName,app,fn}) {    
+      let parsedData = sessionStorage.getItem('customConfig')
+      if (parsedData) {
+        this.tableConfigs = JSON.parse(parsedData)
+        if (this.tableConfigs[`${app.systemappid}${tableName}`]) {
+          this.columnsIndex =  this.tableConfigs[`${app.systemappid}${tableName}`].index
+          let a = utils.TBLayout(tableName)
+          let b = this.tableConfigs[`${app.systemappid}${tableName}`].selected
+          b = this.columnsIndex.filter(e=>b.includes(e))
+          this.selectedColumns = b.map((key) => a.find((obj) => obj.dataIndex === key));
+        } else {
+          this.columnsIndex = utils.TBLayout(tableName).map(e=>e.dataIndex)
+          fn()
+        }
+      } else {
+        this.columnsIndex = utils.TBLayout(tableName).map(e=>e.dataIndex)
+        fn()
+      }
+      
+    },
+    /**
+     * 设置配置的列数据
+     */
+
+    setColnums (param) {
+      let a = utils.TBLayout(param.tableName)
+      let b = param.checkedColumns
+      b = this.columnsIndex.filter(e=>b.includes(e))
+      this.selectedColumns = b.map((key) => a.find((obj) => obj.dataIndex === key));
+    }
+  }
+    
+})

+ 5 - 6
src/stores/modules/routeTabs.js

@@ -25,9 +25,9 @@ export const useRouteTabsStore = defineStore('routeTabs', {
   actions:{
       // 存储路由记录
     saveRoute (route) {
-      let hasRoute = this.historyRoutes.some(e=>e.name == route.meta.name)
+      let hasRoute = this.historyRoutes.some(e=>e.name == route.name)
       if (!hasRoute)
-      this.historyRoutes.push(route)
+        return this.historyRoutes.push(route)
     },
 
     // 删除路由
@@ -35,18 +35,17 @@ export const useRouteTabsStore = defineStore('routeTabs', {
       let routes = router.options.routes[1].children
       routes.forEach(e=>{
         if (e.name == route) {
-          e.meta.keepAlive = false
-          e.meta.name = e.name
+          e.keepAlive = false
         }
       })
       this.historyRoutes = this.historyRoutes.filter(e=>{
-          if (e.meta.name !== route) {
+          if (e.name !== route) {
               return e
           }
       })
       if(route == currentRoute) {
           if (this.historyRoutes.length > 0)
-            return router.replace({name:this.historyRoutes[0].meta.name})
+            return router.replace({name:this.historyRoutes[0].name})
       }
     },
   }

+ 8 - 6
src/template/normalTable/index.vue

@@ -23,10 +23,10 @@
       :bordered="!hideBorder"
       :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
       <template #headerCell="{ column }">
-        <div style="min-width:100px;" v-if="column.filter == 1 || column.filter == 2">
+        <div style="width:100%" v-if="column.filter == 1 || column.filter == 2">
           <a-input v-model:value="column.value" :placeholder="column.title" @change="setSearchParam(column.dataIndex,column.value)" @pressEnter="listData"></a-input>
         </div>
-        <span v-else style="display:inline-block;padding:0 10px;">{{column.title}}</span>
+        <span v-else style="display:inline-block;padding:0;">{{column.title}}</span>
       </template>
       <template #bodyCell="{ column, record }">
         <slot name="tb_cell" :data="{column, record}"></slot>
@@ -36,18 +36,21 @@
 </template>
 
 <script setup>
-  import {defineEmits,ref,defineProps,defineExpose,onMounted,onUnmounted,computed,watch } from 'vue';
+  import {defineEmits,ref,defineProps,defineExpose,onMounted,onUnmounted,computed,watch,onActivated } from 'vue';
   import settingColumns from '@/components/tableConfiguration/settingColumns.vue'
   import fullScreen from '@/components/tableConfiguration/fullScreen.vue'
   import Api  from '@/api/api'
   import { storeToRefs } from 'pinia'
   import { useRouter } from "vue-router";
   import { useBaseStore } from '@/stores/modules/base'
+  import { useColumnsStore } from '@/stores/modules/columns'
   import { useAuthStore } from '@/stores/modules/auth'
   const store = useAuthStore()
+  const colStore = useColumnsStore()
   const base = useBaseStore()
   let { app } = storeToRefs(store)
-  let { tableRecord,selectedColumns,fullscreen} = storeToRefs(base)
+  let { tableRecord,fullscreen} = storeToRefs(base)
+  let { selectedColumns } = storeToRefs(colStore)
   const router = useRouter()
   const props = defineProps({
     tableName:String,
@@ -103,13 +106,12 @@
     props.param.content.where.tablefilter[title] = value
   }
   onMounted(()=>{
-    
     let param = {
       tableName:props.tableName,
       app:app.value,
       fn:()=>{}
     }
-    props.tableName ? base.getTableColumns(param) :''
+    props.tableName ? colStore.setConfig(param) :''
     props.noQuery ? '' : listData()
   })
   onUnmounted(()=>{

+ 2 - 8
src/theme/theme.less

@@ -5,24 +5,17 @@
 .onSystem{
   color:#333 !important;
   font-weight: bold;
-  border-right:4px solid @primary-color;  /* Chrome 10-25, Safari 5.1-6 */   
-  // box-shadow: 0 0px 8px @primary-color;
+  border-right:4px solid @primary-color;  /* Chrome 10-25, Safari 5.1-6 */
 }
 .aside-item:hover{
   color:#333 !important;
   border-right:4px solid @primary-color;  /* fallback for old browsers */
-  // box-shadow: 0 0px 8px @primary-color !important;
 }
-
 .footer {
   text-align: center;
   background:@primary-color !important;
   color:#fff !important;
 }
-// .table-striped td {
-//   background:#f8f9fd;
-  
-// }
 
 .aside-menu-icon{
   display: inline-block;
@@ -37,4 +30,5 @@
 .onSystem .aside-menu-icon{
   color:#fff;
   background: @primary-color ;
+  box-shadow: 0 0px 5px @primary-color;
 }

+ 1 - 1
src/utils/utils.js

@@ -23,7 +23,7 @@ export default {
   },
   // 获取应用表格
   TBLayout (appname) {
-
+    console.log(appname,'utilsappname')
     try {
       // 获取应用数据
       const store = useAuthStore()

+ 41 - 50
src/views/login/login.vue

@@ -1,49 +1,48 @@
 <template>
 <div class="conatiner">
-    <!-- <p class="introduce">楚楚E-订单系统&nbsp;<small>是一个便捷、高效的供应链管理软件。我们的系统为您提供基于云端的物流和供应链、库存管理、产品管理等功能,让订货变得无比简单。通过本系统,您可以随时下单或查看订单状态,轻松跟踪进度并且及时调整采购计划。</small></p> -->
-    <div class="login-form">
-      <p class="color-info">欢迎登录</p>
-      <div>
-        <p class="title">云链E-订单系统</p>
+    <h1 class="introduce">E-YUNLIAN</h1>
+    
+    <div class="login-wrap">
+      <div class="top">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1890ff" fill-opacity="1" d="M0,288L48,266.7C96,245,192,203,288,202.7C384,203,480,245,576,245.3C672,245,768,203,864,202.7C960,203,1056,245,1152,272C1248,299,1344,309,1392,314.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>    
       </div>
-      <a-form
-        :model="formState"
-        name="basic"
-        layout="vertical"
-        autocomplete="off"
-        @finish="onFinish"
-        @finishFailed="onFinishFailed"
-      >
-        <a-form-item
-          label="账号"
-          name="phonenumber"
-          :rules="[{ required: true, message: '请输入账号' }]" 
+      <div class="login-form">
+        <p class="color-info">欢迎登录</p>
+        <div>
+          <p class="title">云链E-订单系统</p>
+        </div>
+        <a-form
+          :model="formState"
+          name="basic"
+          layout="vertical"
+          autocomplete="off"
+          @finish="onFinish"
+          @finishFailed="onFinishFailed"
         >
-          <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入账号"/>
-        </a-form-item>
+          <a-form-item
+            label="账号"
+            name="phonenumber"
+            :rules="[{ required: true, message: '请输入账号' }]" 
+          >
+            <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入账号"/>
+          </a-form-item>
 
-        <a-form-item
-          label="密码"
-          name="password"
-          :rules="[{ required: true, message: '请输入密码!' }]"
-        >
-          <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码"/>
-        </a-form-item>
+          <a-form-item
+            label="密码"
+            name="password"
+            :rules="[{ required: true, message: '请输入密码!' }]"
+          >
+            <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码"/>
+          </a-form-item>
 
-        <a-form-item name="remember">
-          <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
-        </a-form-item>
+          <a-form-item name="remember">
+            <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
+          </a-form-item>
 
-        <a-form-item>
-          <a-button :loading="loading" type="primary" html-type="submit" size="large" block>登录</a-button>
-        </a-form-item>
-      </a-form>
-      <!-- <a-divider><span style="color:#999;font-weight:300">其他登录方式</span></a-divider>
-      <span>敬请期待</span> -->
-    </div>
-    <div class="login-wrap">
-      <div class="top">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1890ff" fill-opacity="1" d="M0,288L48,266.7C96,245,192,203,288,202.7C384,203,480,245,576,245.3C672,245,768,203,864,202.7C960,203,1056,245,1152,272C1248,299,1344,309,1392,314.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>    
+          <a-form-item>
+            <a-button :loading="loading" type="primary" html-type="submit" size="large" block>登录</a-button>
+          </a-form-item>
+        </a-form>
       </div>
     </div>
     <a-layout-footer class="footer">
@@ -165,21 +164,13 @@ export default defineComponent({
 }
 .introduce{
   position: absolute;
-  left: 10%;
-  top:10vh;
-  font-size: 20px;
+  left: 20px;
+  top:20px;
   color:#fff;
   text-indent: 3rem;
   line-height: 3rem;
   text-shadow: 0 0px 5px #666;
-}
-.introduce {
-  white-space: pre-wrap; /* 允许换行 */
-  overflow: hidden; /* 隐藏超出部分 */
-  max-width: 700px; /* 固定宽度为 200 像素 */
-  animation: typingH 5s forwards;
-  
-  display: inline-block; /* 让行内元素可以自适应宽度、允许换行 */
+  font-family: fantasy;
 }
 
 /* 伪元素来实现光标 */