字词卡片

src/utils/auth.js

@@ -3,14 +3,16 @@ import Cookies from 'js-cookie';
 const TokenKey = 'GCLS_Token';
 
 export function getToken() {
-  return Cookies.get(TokenKey);
+  return Cookies.get(TokenKey) ? Cookies.get(TokenKey) : sessionStorage.getItem(TokenKey);
 }
 
-export function setToken(token) {
+export function setToken (token) {
+  sessionStorage.setItem(TokenKey, JSON.stringify(token));
   return Cookies.set(TokenKey, token);
 }
 
-export function removeToken() {
+export function removeToken () {
+  sessionStorage.removeItem(TokenKey)
   return Cookies.remove(TokenKey);
 }
 
@@ -27,14 +29,16 @@ export function getAccessToken() {
 
 const ConfigKey = 'GCLS_Config';
 
-export function getConfig() {
-  return Cookies.get(ConfigKey);
+export function getConfig () {
+  return Cookies.get(ConfigKey) ? Cookies.get(ConfigKey) : sessionStorage.getItem(ConfigKey);
 }
 
 export function setConfig(val) {
+  sessionStorage.setItem(ConfigKey, JSON.stringify(val));
   return Cookies.set(ConfigKey, val);
 }
 
-export function removeConfig() {
+export function removeConfig () {
+  sessionStorage.removeItem(ConfigKey);
   return Cookies.remove(ConfigKey);
 }

src/utils/request.js

@@ -62,22 +62,22 @@ service.interceptors.response.use(
       return Promise.reject(new Error(res.msg || res.error || 'Error'));
     } else if (res.status === -1) {
       // 登录失效
-      // Cookies.remove('JSESSIONID');
-      // removeToken();
-      // removeSession('SysList');
+      Cookies.remove('JSESSIONID');
+      removeToken();
+      removeSession('SysList');
 
-      // msg = Message({
-      //   message: '登录会话失效，请重新登录',
-      //   type: 'error',
-      //   showClose: true,
-      //   duration: 0,
-      // });
-      // if (process.env.NODE_ENV == 'development') {
-      //   router.push('/login');
-      // } else {
-      //   window.location.href = '/';
-      // }
-      // return false;
+      msg = Message({
+        message: '登录会话失效，请重新登录',
+        type: 'error',
+        showClose: true,
+        duration: 0,
+      });
+      if (process.env.NODE_ENV == 'development') {
+        router.push('/login');
+      } else {
+        window.location.href = '/';
+      }
+      return false;
     }
     Message.closeAll();
     return res;

src/views/wordcard/AudioPlay.vue

@@ -4,8 +4,8 @@
       <img
         :src="
           audio.paused
-            ? require('../../assets/teacherdev/icon-voice-red.png')
-            : require('../../assets/teacherdev/icon-voice-play-red.png')
+            ? require('../../assets/teacherdev/voice-white.png')
+            : require('../../assets/teacherdev/voice-play.png')
         "
         class="voice-play"
       />

src/views/wordcard/cread.vue

@@ -106,8 +106,8 @@ export default {
       editCardflag: true, // 是否编辑卡片
       newEditTable: [
         {
-          borderColor: '#000000',
-          fontColor: '#000000',
+          borderColor: '#165dff',
+          fontColor: '#165dff',
           fontAlign: 'left',
           label: '',
           headerCon: '',
@@ -122,6 +122,7 @@ export default {
             hz_info: [],
             pinyin: '',
             audio_file: '',
+            cixing: '',
           },
         },
       ],
@@ -136,8 +137,8 @@ export default {
   methods: {
     addCard() {
       this.newEditTable.push({
-        borderColor: '#000000',
-        fontColor: '#000000',
+        borderColor: '#165dff',
+        fontColor: '#165dff',
         fontAlign: 'left',
         label: '',
         headerCon: '',
@@ -152,6 +153,7 @@ export default {
           hz_info: [],
           pinyin: '',
           audio_file: '',
+          cixing: '',
         },
       });
     },
@@ -320,8 +322,8 @@ export default {
       this.loading = false;
       this.newEditTable = [
         {
-          borderColor: '#000000',
-          fontColor: '#000000',
+          borderColor: '#165dff',
+          fontColor: '#165dff',
           fontAlign: 'left',
           label: '',
           headerCon: '',
@@ -336,6 +338,7 @@ export default {
             hz_info: [],
             pinyin: '',
             audio_file: '',
+            cixing: '',
           },
         },
       ];

src/views/wordcard/printNew.vue

@@ -5,7 +5,6 @@
         <div
           class="left left-preview"
           :class="[data.left.fileList.length === 0 ? 'left-big' : '']"
-          v-if="(isPreview && showLeft) || !isPreview"
           :style="{ borderColor: data.borderColor }"
         >
           <div class="header-info-preview">
@@ -23,38 +22,43 @@
           <h2 :class="['con-preview', data.left.fileList.length === 0 ? 'con-preview-big' : '']">
             {{ data.left.con }}
           </h2>
-          <a class="overturn-btn" v-if="isPreview" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
         </div>
-        <div
-          class="right right-preview left-preview"
-          :class="[isPreview ? 'right-preview-rota' : '']"
-          v-if="(isPreview && !showLeft) || !isPreview"
-          :style="{ borderColor: data.borderColor }"
-        >
-          <div class="hz-box">
-            <div class="hz-item" v-for="(itemh, indexh) in data.right.hz_info" :key="indexh">
-              <p :style="{ color: data.borderColor }">
-                {{ data.right.pinyin.split(' ')[indexh] ? data.right.pinyin.split(' ')[indexh] : '' }}
-              </p>
-              <Strockplay
-                className="adult-strockplay"
-                :Book_text="itemh.con"
-                :playStorkes="true"
-                :strokePlayColor="data.borderColor"
-                :strokeColor="'#000000'"
-                :palyWidth="'18px'"
-                :BoxbgType="'0'"
-                :curItem="itemh.hzDetail.hz_json"
-                :targetDiv="'writeTops-item-' + pageNumber + '-' + indexh + '-' + itemh.con"
-                :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
-                class="writeTop-item"
-                :style="{ borderColor: data.borderColor }"
-              />
+        <div class="right right-preview left-preview" :style="{ borderColor: data.borderColor }">
+          <div style="width: max-content">
+            <AudioPlay
+              :file-id="data.right.audio_file"
+              v-if="data.right.audio_file"
+              :style="{ background: data.borderColor }"
+            />
+            <div class="hz-box">
+              <div class="hz-item" v-for="(itemh, indexh) in data.right.hz_info" :key="indexh">
+                <p :style="{ color: data.borderColor }">
+                  {{ data.right.pinyin.split(' ')[indexh] ? data.right.pinyin.split(' ')[indexh] : '' }}
+                </p>
+                <Strockplay
+                  className="adult-strockplay"
+                  :Book_text="itemh.con"
+                  :playStorkes="true"
+                  :strokePlayColor="data.borderColor"
+                  :strokeColor="'#000000'"
+                  :palyWidth="'18px'"
+                  :BoxbgType="'0'"
+                  :curItem="itemh.hzDetail.hz_json"
+                  :targetDiv="'writeTops-item-' + '-' + indexh + '-' + itemh.con"
+                  :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
+                  class="writeTop-item"
+                  :style="{ borderColor: data.borderColor }"
+                />
+              </div>
             </div>
-            <AudioPlay :file-id="data.right.audio_file" v-if="data.right.audio_file" />
           </div>
 
           <div class="definition-box">
+            <div v-if="data.right.cixing">
+              <label class="card-label">词性：</label>
+              <p>{{ data.right.cixing }}</p>
+            </div>
+
             <div v-if="data.right.definition">
               <label class="card-label">释义：</label>
               <p>{{ data.right.definition }}</p>
@@ -68,7 +72,6 @@
               <p>{{ data.right.exampleSent }}</p>
             </div>
           </div>
-          <a class="overturn-btn" v-if="isPreview" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
         </div>
       </div>
       <!-- <div class="writeBottom">
@@ -329,7 +332,7 @@ export default {
       }
     }
     .left-preview {
-      padding-top: 32px;
+      padding-top: 40px;
       padding-bottom: 32px;
     }
     .left-big {
@@ -381,7 +384,7 @@ export default {
       }
     }
     .right-preview {
-      padding: 72px;
+      padding: 36px 72px;
       display: block;
       .hz-box {
         justify-content: center;
@@ -403,7 +406,7 @@ export default {
         }
       }
       :deep .audio-wrapper {
-        margin: 24px auto;
+        margin: 0 auto 8px auto;
         border-radius: 40px;
         background: #f3f3f3;
         padding: 16px;
@@ -413,7 +416,7 @@ export default {
         cursor: pointer;
         .voice-play {
           width: 24px;
-          height: 24pxs;
+          height: 24px;
         }
       }
       .definition-box {
@@ -440,7 +443,7 @@ export default {
     }
     .item-image {
       position: relative;
-      background: #f2f3f5;
+      // background: #f2f3f5;
       border-radius: 8px;
       overflow: hidden;
       .item-image-del {

src/views/wordcard/writeTableNew.vue

@@ -22,14 +22,21 @@
             />
             <span class="item-image-del" @click="handleDeleteImg"><i class="el-icon-delete"></i></span>
           </div>
-          <div class="item-con">
-            <label>字词</label>
-            <el-input v-model="data.left.con" placeholder="输入" @blur="handleBlurCon"></el-input>
-          </div>
-          <div class="item-con">
-            <label>拼音</label>
-            <el-input class="pinyin" v-model="data.right.pinyin" placeholder="输入"></el-input>
+          <div style="display: flex; flex-wrap: wrap">
+            <div class="item-con">
+              <label>字词</label>
+              <el-input v-model="data.left.con" placeholder="输入" @blur="handleBlurCon"></el-input>
+            </div>
+            <div class="item-con">
+              <label>拼音</label>
+              <el-input class="pinyin" v-model="data.right.pinyin" placeholder="输入"></el-input>
+            </div>
+            <div class="item-con">
+              <label>词性</label>
+              <el-input v-model="data.right.cixing" placeholder="输入"></el-input>
+            </div>
           </div>
+
           <a class="del-btn" @click="handleDelItem"><i class="el-icon-delete"></i></a>
         </div>
         <div class="right">
@@ -86,30 +93,40 @@
             <h5 :style="{ textAlign: data.fontAlign }">{{ data.headerCon }}</h5>
             <label :style="{ background: data.borderColor }">{{ data.label }}</label>
           </div>
-          <div class="hz-box">
-            <div class="hz-item" v-for="(itemh, indexh) in data.right.hz_info" :key="indexh">
-              <p :style="{ color: data.borderColor }">
-                {{ data.right.pinyin.split(' ')[indexh] ? data.right.pinyin.split(' ')[indexh] : '' }}
-              </p>
-              <Strockplay
-                className="adult-strockplay"
-                :Book_text="itemh.con"
-                :playStorkes="true"
-                :strokePlayColor="data.borderColor"
-                :strokeColor="'#000000'"
-                :palyWidth="'18px'"
-                :BoxbgType="'0'"
-                :curItem="itemh.hzDetail.hz_json"
-                :targetDiv="'writeTops-item-' + pageNumber + '-' + indexh + '-' + itemh.con"
-                :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
-                class="writeTop-item"
-                :style="{ borderColor: data.borderColor }"
-              />
+          <div style="width: max-content">
+            <AudioPlay
+              :style="{ background: data.borderColor }"
+              :file-id="data.right.audio_file"
+              v-if="data.right.audio_file"
+            />
+            <div class="hz-box">
+              <div class="hz-item" v-for="(itemh, indexh) in data.right.hz_info" :key="indexh">
+                <p :style="{ color: data.borderColor }">
+                  {{ data.right.pinyin.split(' ')[indexh] ? data.right.pinyin.split(' ')[indexh] : '' }}
+                </p>
+                <Strockplay
+                  className="adult-strockplay"
+                  :Book_text="itemh.con"
+                  :playStorkes="true"
+                  :strokePlayColor="data.borderColor"
+                  :strokeColor="'#000000'"
+                  :palyWidth="'18px'"
+                  :BoxbgType="'0'"
+                  :curItem="itemh.hzDetail.hz_json"
+                  :targetDiv="'writeTops-item-' + pageNumber + '-' + indexh + '-' + itemh.con"
+                  :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
+                  class="writeTop-item"
+                  :style="{ borderColor: data.borderColor }"
+                />
+              </div>
             </div>
-            <AudioPlay :file-id="data.right.audio_file" v-if="data.right.audio_file" />
           </div>
 
           <div class="definition-box">
+            <div v-if="data.right.cixing">
+              <label class="card-label">词性：</label>
+              <p>{{ data.right.cixing }}</p>
+            </div>
             <div v-if="data.right.definition">
               <label class="card-label">释义：</label>
               <p>{{ data.right.definition }}</p>
@@ -357,7 +374,7 @@ export default {
       }
     }
     .left-preview {
-      padding-top: 32px;
+      padding-top: 40px;
       padding-bottom: 32px;
     }
     .header-info-preview {
@@ -437,6 +454,7 @@ export default {
       .config-box {
         display: flex;
         align-items: center;
+        width: 100%;
         span {
           color: #000;
           font-size: 14px;
@@ -465,7 +483,7 @@ export default {
       }
     }
     .right-preview {
-      padding: 72px;
+      padding: 36px 72px;
       display: block;
       .hz-box {
         width: 100%;
@@ -486,7 +504,7 @@ export default {
         }
       }
       :deep .audio-wrapper {
-        margin: 58px 0 0 35px;
+        margin: 0 auto 8px auto;
         border-radius: 40px;
         background: #f3f3f3;
         padding: 16px;
@@ -496,7 +514,7 @@ export default {
         cursor: pointer;
         .voice-play {
           width: 24px;
-          height: 24pxs;
+          height: 24px;
         }
       }
       .definition-box {
@@ -524,7 +542,7 @@ export default {
     }
     .item-image {
       position: relative;
-      background: #f2f3f5;
+      // background: #f2f3f5;
       border-radius: 8px;
       overflow: hidden;
       font-size: 0;
@@ -545,10 +563,10 @@ export default {
       }
     }
     .item-con {
-      width: 100%;
+      width: 50%;
       display: flex;
       align-items: center;
-      margin-top: 8px;
+      margin-top: 16px;
       label {
         color: #4e5969;
         font-size: 14px;
@@ -573,6 +591,7 @@ export default {
         }
       }
     }
+
     .con-preview {
       margin-top: 16px;
       color: #000;
@@ -716,3 +735,45 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.writeTable {
+  input::placeholder {
+    font-family: initial;
+  }
+  input::-webkit-input-placeholder {
+    font-family: initial;
+  }
+
+  input::-moz-placeholder {
+    font-family: initial;
+  }
+
+  input:-moz-placeholder {
+    font-family: initial;
+  }
+
+  input:-ms-input-placeholder {
+    font-family: initial;
+  }
+  .header-info {
+    input::placeholder {
+      font-size: 16px;
+    }
+    input::-webkit-input-placeholder {
+      font-size: 16px;
+    }
+
+    input::-moz-placeholder {
+      font-size: 16px;
+    }
+
+    input:-moz-placeholder {
+      font-size: 16px;
+    }
+
+    input:-ms-input-placeholder {
+      font-size: 16px;
+    }
+  }
+}
+</style>