style: optimize css & font

xrkffgg · Oct 10, 2020 · 3cdd969 · 3cdd969
1 parent 7379ba3
commit 3cdd969
Show file tree

Hide file tree

Showing 22 changed files with 41 additions and 104 deletions.
diff --git a/public/index.html b/public/index.html
@@ -16,6 +16,7 @@
     <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
     <% } %>
     <title>🐋 Kvue - xrkffgg</title>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&family=PT+Sans&display=swap" rel="stylesheet">
   </head>
   <body>
     <noscript>

diff --git a/src/assets/cur/Arrow.png b/src/assets/cur/Arrow.png
diff --git a/src/assets/cur/Hand.png b/src/assets/cur/Hand.png
diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss
@@ -6,26 +6,11 @@ $bg--color : #fff;
 $main--color : #f1f4f5;
 $view--margin : 16px;
 
-.num {
-  font-family: 'Roboto-Thin';
-  font-weight: bolder;
-}
-
-.cur-default {
-  cursor: default;
-  cursor: url('../cur//Arrow.png'), auto !important;
-}
-
-.cur-pointer {
-  cursor: pointer;
-  cursor: url('../cur//Hand.png'), auto !important;
-}
-
 #index {
   padding : 0 $index--padding 0 $index--padding;
   height: 100vh;
   position: relative;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-family: 'Noto Sans SC', 'PT Sans', "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   border-right: 1px #eef2f8 solid;
   border-left: 1px #eef2f8 solid;
   .header {
@@ -113,7 +98,7 @@ $hover--color : #A4D3EE;
   }
 
   .tab {
-    margin-left: calc(100% - 540px);
+    margin-left: calc(100% - 640px);
     color: $title--color;
     position: relative;
     font-size: 1.3rem;

diff --git a/src/assets/scss/ele.scss b/src/assets/scss/ele.scss
@@ -2,65 +2,16 @@
   border-right: 0px;
 }
 
-@mixin cur-hand {
-  cursor: pointer;
-  cursor: url('../cur/Hand.png'), auto !important;
-}
-
-@mixin cur-def {
-  cursor: default;
-  cursor: url('../cur/Arrow.png'), auto !important;
-}
-
 .el-submenu .el-menu-item {
   min-width: auto;
-  @include cur-hand;
-}
-
-.el-submenu__title {
-  @include cur-hand;
-}
-
-.el-menu-item.is-active {
-  @include cur-hand;
-}
-
-.el-table__expand-icon {
-  @include cur-hand;
-}
-
-.el-table th.is-sortable {
-  @include cur-hand;
-}
-
-.caret-wrapper {
-  @include cur-hand;
-}
-
-.el-button {
-  @include cur-hand;
-}
-
-.el-collapse-item__header {
-  @include cur-hand;
-}
-
-.el-tabs__item {
-  @include cur-hand;
 }
 
 .el-checkbox__input.is-disabled+span.el-checkbox__label {
   color: #606266;
-  @include cur-def;
 }
 
 .el-checkbox__input.is-disabled .el-checkbox__inner {
   background-color: #fff;
-  @include cur-def();
-}
-
-textarea {
-  @include cur-def();
 }
 
 button {

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,19 +1,19 @@
 <template>
   <div id="headercom">
     <div class="title inline">
-      <div class="title1 num inline cur-pointer" @click="doGoHome">
+      <div class="title1  inline" @click="doGoHome">
         <a>Kvue</a>
       </div>
-      <div class="title2 num inline cur-pointer" @click="doGoGitUser">
+      <div class="title2  inline" @click="doGoGitUser">
         <a>by xrkffgg</a>
       </div>
     </div>
 
     <div class="tab inline">
-      <a class="headmenu inline cur-pointer" @click="doGoHost">首 页</a>
-      <a class="headmenu inline cur-pointer" @click="doGoHome">Home</a>
-      <a class="headmenu inline cur-pointer" @click="doGoGit">Github</a>
-      <a class="headtime inline">{{ nowDate }}</a>
+      <a class="headmenu inline" @click="doGoHost">首 页</a>
+      <a class="headmenu inline " @click="doGoHome">Home</a>
+      <a class="headmenu inline " @click="doGoGit">Github</a>
+      <a class="headtime inline  ">{{ nowDate }}</a>
     </div>
   </div>
 </template>

diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -9,13 +9,13 @@
         v-for="ima in imas"
         :key="ima.id"
         @click="gotab(ima.url)"
-        class="onetab cur-pointer">
+        class="onetab">
         <img :id="ima.id" :src="ima.src" />
       </div>
-      <div class="onetab cur-pointer" @click="doo('vx')">
+      <div class="onetab" @click="doo('vx')">
         <img id="ima9" src="https://img.shields.io/badge/%E5%BE%AE%E4%BF%A1-%E5%90%91TA%E5%85%B3%E7%88%B1-brightgreen.svg?style=flat-square">
       </div>
-      <div class="onetab cur-pointer" @click="doo('zfb')">
+      <div class="onetab" @click="doo('zfb')">
         <img id="ima10" src="https://img.shields.io/badge/%E6%94%AF%E4%BB%98%E5%AE%9D-%E5%90%91TA%E5%85%B3%E7%88%B1-blue.svg?style=flat-square">
       </div>
     </div>
@@ -46,18 +46,18 @@
     <div class="homeaboutbox">
       <div class="aboutcon">
         <div class="card">
-          <div class="cardfont cur-pointer" @click="showhis">项目记录</div>
+          <div class="cardfont" @click="showhis">项目记录</div>
         </div>
         <div class="card">
-          <div class="cardfont cur-pointer" @click="doGoGitIssues">意见建议</div>
+          <div class="cardfont" @click="doGoGitIssues">意见建议</div>
         </div>
         <div class="card">
-          <div class="cardfont cur-pointer" @click="showme">关于作者</div>
+          <div class="cardfont" @click="showme">关于作者</div>
         </div>
       </div>
       <div class="copybox">
         <div class="num copy">
-          ©&nbsp;&nbsp;{{$store.state.copy_year}}&nbsp;&nbsp;<a class="copyname cur-pointer" @click="doGoGit">xrkffgg</a>
+          ©&nbsp;&nbsp;{{$store.state.copy_year}}&nbsp;&nbsp;<a class="copyname" @click="doGoGit">xrkffgg</a>
         </div>
       </div>
     </div>

diff --git a/src/components/Siderbar.vue b/src/components/Siderbar.vue
@@ -4,10 +4,10 @@
       <div id="avatarId" class="box-circle">
         <div id="fillId" class="fill"></div>
       </div>
-      <div class="box-font num cur-pointer" @click="doGoGitUser">
+      <div class="box-font " @click="doGoGitUser">
         xrkffgg
       </div>
-      <div class="box-sign num">
+      <div class="box-sign ">
         Tenacity & Brave & Love
       </div>
     </div>
@@ -40,19 +40,19 @@
     </el-menu>
 
     <div class="sidefooter">
-      <div class="fotter-follow num">Follow <div style="color:red;display:inline;">me</div> at</div>
+      <div class="fotter-follow ">Follow <div style="color:red;display:inline;">me</div> at</div>
       <el-row type="flex" justify="space-around" style="margin-top:10px;">
         <el-col :span="5" :offset="1">
-          <div class="follow follow-git cur-pointer" @click="doGoGitUser"></div>
+          <div class="follow follow-git" @click="doGoGitUser"></div>
         </el-col>
         <el-col :span="5">
-          <div class="follow follow-twiiter cur-pointer" @click="doGoTwiiter"></div>
+          <div class="follow follow-twiiter" @click="doGoTwiiter"></div>
         </el-col>
         <el-col :span="5">
-          <div class="follow follow-jue cur-pointer" @click="doGoJuejin">掘</div>
+          <div class="follow follow-jue" @click="doGoJuejin">掘</div>
         </el-col>
         <el-col :span="5">
-          <div class="follow follow-jian cur-pointer" @click="doGoJianshu">简</div>
+          <div class="follow follow-jian" @click="doGoJianshu">简</div>
         </el-col>
       </el-row>
     </div>

diff --git a/src/components/canvasCom/001.vue b/src/components/canvasCom/001.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="canvas001">
     <div class="main-title">canvas picture</div>
-    <div class="main-title-time num">2019-08-15</div>
+    <div class="main-title-time ">2019-08-15</div>
 
     <div class="box">
       <canvas id="canvas01" width="400" height="400"></canvas>

diff --git a/src/components/cssCom/001.vue b/src/components/cssCom/001.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="css001">
     <div class="main-title">水纹效果</div>
-    <div class="main-title-time num">2019-09-18</div>
+    <div class="main-title-time ">2019-09-18</div>
     <div class="main-title-tip">
       参 考：<el-link href="https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/" target="_blank">张鑫旭</el-link> 
     </div>

diff --git a/src/components/cssCom/002.vue b/src/components/cssCom/002.vue
@@ -4,7 +4,7 @@
     <div class="main-content">
       <el-tabs tab-position="left">
         <el-tab-pane label="图片旋转">
-          <div class="main-title-time num">2019-05-16</div>
+          <div class="main-title-time ">2019-05-16</div>
           <el-row :gutter="30">
             <el-col :span="8">
               <div class="tag">
@@ -56,7 +56,7 @@
 
         </el-tab-pane>
         <el-tab-pane label="播放按钮">
-          <div class="main-title-time num">2019-09-19</div>
+          <div class="main-title-time ">2019-09-19</div>
           <div class="css-show-box">
             <label>
               <input type="checkbox" id="status" />
@@ -70,7 +70,7 @@
         </el-tab-pane>
 
         <el-tab-pane label="融合粘滞效果">
-          <div class="main-title-time num">2019-09-23</div>
+          <div class="main-title-time ">2019-09-23</div>
           <div class="css-show-box black">
             <div class="box3 box-1"></div>
             <div class="box3 box-2"></div>

diff --git a/src/components/cssCom/003.vue b/src/components/cssCom/003.vue
@@ -6,13 +6,13 @@
 
         <!-- 2 -->
         <el-tab-pane label="彩虹文字">
-          <div class="main-title-time num">2019-09-19</div>
+          <div class="main-title-time ">2019-09-19</div>
           <div class="flow-slogon">动感超人</div>
         </el-tab-pane>
 
         <!-- 3 -->
         <el-tab-pane label="打字效果">
-          <div class="main-title-time num">2019-09-23</div>
+          <div class="main-title-time ">2019-09-23</div>
           <p class="typing">简易中文打字效果，作者：张鑫旭</p>
         </el-tab-pane>
       </el-tabs>

diff --git a/src/components/cssCom/004.vue b/src/components/cssCom/004.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="css004">
     <div class="main-title">炫酷文字</div>
-    <div class="main-title-time num">2019-09-19</div>
+    <div class="main-title-time ">2019-09-19</div>
     <div class="main-content">
       <div class="box">
         <h1>是你的网络有问题。</h1>

diff --git a/src/components/easeljsCom/001.vue b/src/components/easeljsCom/001.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="easeljs001">
     <div class="main-title">GlobalToLocal2</div>
-    <div class="main-title-time num">2019-05-29</div>
+    <div class="main-title-time ">2019-05-29</div>
     <div class="main-title-tip">
       Follow the example GlobalToLocal2 of the EaselJS.<br/>
       URL: https://github.com/CreateJS/EaselJS/blob/master/examples/GlobalToLocal2.html<br/>

diff --git a/src/components/index.vue b/src/components/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="index" v-loading="loading" class="cur-default">
+  <div id="index" v-loading="loading">
     <div class="header">
       <header-com></header-com>
     </div>

diff --git a/src/components/jsCom/001.vue b/src/components/jsCom/001.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="js001">
     <div class="main-title">数字转千分</div>
-    <div class="main-title-time num">2019-09-18</div>
+    <div class="main-title-time ">2019-09-18</div>
     <div class="main-title-tip">
       各有优缺
     </div>

diff --git a/src/components/jsCom/002.vue b/src/components/jsCom/002.vue
@@ -4,7 +4,7 @@
     <div class="main-content">
       <el-tabs tab-position="left">
         <el-tab-pane label="Vue-Codemirror">
-          <div class="main-title-time num">2019-09-25</div>
+          <div class="main-title-time ">2019-09-25</div>
           <div class="main-title-tip">
             https://surmon-china.github.io/vue-codemirror/
           </div>
@@ -17,7 +17,7 @@
         </el-tab-pane>
 
         <el-tab-pane label="codemirror">
-          <div class="main-title-time num">2019-09-25</div>
+          <div class="main-title-time ">2019-09-25</div>
           <div class="main-title-tip">
             https://github.com/codemirror/CodeMirror<br/>
             这2个 组件样式有些影响，不要一起使用

diff --git a/src/components/jsCom/003.vue b/src/components/jsCom/003.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="js003">
     <div class="main-title">Excel Demo</div>
-    <div class="main-title-time num">2020-04-03</div>
+    <div class="main-title-time ">2020-04-03</div>
     <div class="main-title-tip">
       应好多小伙伴的要求，先增加一个小 Demo。该 Demo 仅用于展示功能，略粗糙，若有 Bug，请谅解，也可在 
       <a target="_blank" href="https://github.com/xrkffgg/Kvue/issues">https://github.com/xrkffgg/Kvue/issues</a> 提出来。可点击下载 Demo Excel，若因网络问题，可在目录 src/assets/excel 中查看。导出的 Excel 会自动下载到浏览器默认的下载地址中。引入 2 个 JS 文件，最新的查看 

diff --git a/src/components/jsCom/004.vue b/src/components/jsCom/004.vue
@@ -2,7 +2,7 @@
 <template>
   <div id="js004">
     <div class="main-title">Drag rezise Demo</div>
-    <div class="main-title-time num">2020-06-03</div>
+    <div class="main-title-time ">2020-06-03</div>
     <div class="main-title-tip">
       项目中引用的 csshake 为简版，完整版请查看 <a target="_blank" href="https://github.com/xrkffgg/Ktools/blob/master/CSS/csshake.css">https://github.com/xrkffgg/Ktools/blob/master/CSS/csshake.css</a>
     </div>

diff --git a/src/components/jsCom/005.vue b/src/components/jsCom/005.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="js005">
     <div class="main-title">摄像头拍照</div>
-    <div class="main-title-time num">2020-07-15</div>
+    <div class="main-title-time ">2020-07-15</div>
     <div class="main-title-tip">
       Vue 调取 自身摄像头 或 外接 USB 摄像头，生成 截图 和 Base 64。
     </div>

diff --git a/src/components/uiCom/001.vue b/src/components/uiCom/001.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="ui001">
     <div class="main-title">Eleme Table</div>
-    <div class="main-title-time num">2019-08-15</div>
+    <div class="main-title-time ">2019-08-15</div>
 
     <div class="box">
       <el-table

diff --git a/src/components/uiCom/003.vue b/src/components/uiCom/003.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="ui003">
     <div class="main-title">Table Merge Demo</div>
-    <div class="main-title-time num">2020-08-17</div>
+    <div class="main-title-time ">2020-08-17</div>
     <el-divider />
     <el-row style="margin-top: 20px;">
       <el-col :span="20" :offset="2">