|
|
@@ -1,9 +1,38 @@
|
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
|
<template>
|
|
|
- <div class="newWord-preview" :style="getAreaStyle()">
|
|
|
+ <div class="newWord-template-preview" :style="getAreaStyle()">
|
|
|
<SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
|
|
|
|
|
|
- <div class="main"></div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="item-box" v-for="(item, index) in data.option_list" :key="index">
|
|
|
+ <div class="number-box">
|
|
|
+ <span class="number">{{ index + 1 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="items" v-for="(items, indexs) in item.content_list" :key="indexs">
|
|
|
+ <template v-if="items && items.type === 'img'">
|
|
|
+ <el-image
|
|
|
+ class="items-image"
|
|
|
+ v-if="items.file_list[0]"
|
|
|
+ :src="items.file_list[0].file_url"
|
|
|
+ fit="contain"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="items && items.type === 'lian'">
|
|
|
+ <span class="items-lian">{{ items.con }}</span>
|
|
|
+ </template>
|
|
|
+ <Strockplayredline
|
|
|
+ v-else-if="items && items.type === 'hanzi'"
|
|
|
+ :Book_text="items.con"
|
|
|
+ :playStorkes="isEnable(data.property.is_enable_play_structure)"
|
|
|
+ :curItem="isEnable(data.property.is_enable_high_strokes) ? items : null"
|
|
|
+ :type="data.type"
|
|
|
+ :targetDiv="'newWordTemplate' + index + indexs"
|
|
|
+ :hz_json="items.hz_info[0].hzDetail.hz_json"
|
|
|
+ class="hanzi-storck"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -11,11 +40,11 @@
|
|
|
import { getNewWordTemplateData } from '@/views/book/courseware/data/newWordTemplate';
|
|
|
|
|
|
import PreviewMixin from '../common/PreviewMixin';
|
|
|
-
|
|
|
+import Strockplayredline from './components/Strockplayredline.vue';
|
|
|
export default {
|
|
|
name: 'NewWordPreview',
|
|
|
|
|
|
- components: {},
|
|
|
+ components: { Strockplayredline },
|
|
|
mixins: [PreviewMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -39,876 +68,56 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
@use '@/styles/mixin.scss' as *;
|
|
|
|
|
|
-.newWord-preview {
|
|
|
- @include preview-base;
|
|
|
-
|
|
|
- .NPC-zhedie {
|
|
|
- width: 1007px;
|
|
|
-
|
|
|
- // width: 780px;
|
|
|
- margin-bottom: 24px;
|
|
|
-
|
|
|
- .aduioLine-box {
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .practiceBox {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 999;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- overflow: hidden;
|
|
|
- overflow-y: auto;
|
|
|
- background: rgba(0, 0, 0, 19%);
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-list {
|
|
|
- overflow: auto;
|
|
|
- background: #f7f7f7;
|
|
|
-
|
|
|
- .NPC-word-tab-common,
|
|
|
- .collocation,
|
|
|
- .tabNum-box {
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-table {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- :deep p {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- > .NPC-word-tr {
|
|
|
- margin-bottom: 8px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .NPC-word-row {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- // flex-flow: wrap;
|
|
|
- justify-content: flex-start;
|
|
|
- padding: 8px 13px 8px 12px;
|
|
|
- padding-right: 80px;
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: linear-gradient(0deg, rgba(0, 0, 0, 8%), rgba(0, 0, 0, 8%)), #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .right-box {
|
|
|
- position: absolute;
|
|
|
- top: 8px;
|
|
|
- right: 5px;
|
|
|
- display: flex;
|
|
|
- gap: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- > span {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-tab-common {
|
|
|
- box-sizing: border-box;
|
|
|
- width: 125px;
|
|
|
- padding-left: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-list {
|
|
|
- padding: 20px 24px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 10%);
|
|
|
- border-top: none;
|
|
|
- border-radius: 0 0 8px 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .detail-icon {
|
|
|
- display: block;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- cursor: pointer;
|
|
|
- opacity: 0.5;
|
|
|
- }
|
|
|
-
|
|
|
- .tabNum-box {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .star-label {
|
|
|
- position: absolute;
|
|
|
- top: 1px;
|
|
|
- right: -6px;
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .play-btn {
|
|
|
- display: block;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-top: 4px;
|
|
|
- background: url('@/assets/fill/voice-pause-red.png') no-repeat left top;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: url('@/assets/fill/voice-play-red.png') no-repeat left top;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tabNum {
|
|
|
- display: block;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-top: 4px;
|
|
|
- margin-left: 8px;
|
|
|
- font-family: 'robot', 'alabo';
|
|
|
- font-size: 12px;
|
|
|
- line-height: 16px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- background: #de4444;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-tab-box {
|
|
|
- width: 240px;
|
|
|
-
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- margin: 2px 0;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-tab-pinyin {
|
|
|
- font-family: 'League';
|
|
|
-
|
|
|
- // white-space: nowrap;
|
|
|
- font-size: 12px;
|
|
|
- word-break: break-word;
|
|
|
-
|
|
|
- &.NPC-word-tab-pinyin-red {
|
|
|
- color: #e35454;
|
|
|
- }
|
|
|
-
|
|
|
- &.NPC-word-tab-pinyin-green {
|
|
|
- color: #24b99e;
|
|
|
- }
|
|
|
-
|
|
|
- &.NPC-word-tab-pinyin-brown {
|
|
|
- color: #bd8865;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-tab-word {
|
|
|
- font-family: '楷体';
|
|
|
- font-size: 16px;
|
|
|
- white-space: nowrap;
|
|
|
-
|
|
|
- &.NPC-word-tab-word-red {
|
|
|
- color: #e35454;
|
|
|
- }
|
|
|
-
|
|
|
- &.NPC-word-tab-word-green {
|
|
|
- color: #24b99e;
|
|
|
- }
|
|
|
-
|
|
|
- &.NPC-word-tab-word-brown {
|
|
|
- color: #bd8865;
|
|
|
- }
|
|
|
-
|
|
|
- &-break {
|
|
|
- word-break: break-word;
|
|
|
- white-space: normal;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-tab-cixing {
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- // width: 48px;
|
|
|
- width: 60px;
|
|
|
- font-family: 'robot', 'alabo';
|
|
|
- text-align: left;
|
|
|
- word-break: break-word;
|
|
|
-
|
|
|
- // font-style: italic; // 要求改为正体
|
|
|
- &.NPC-word-tab-cixing-red {
|
|
|
- color: #e35454;
|
|
|
- }
|
|
|
-
|
|
|
- &.NPC-word-tab-cixing-green {
|
|
|
- color: #24b99e;
|
|
|
- }
|
|
|
-
|
|
|
- &.NPC-word-tab-cixing-brown {
|
|
|
- color: #bd8865;
|
|
|
- }
|
|
|
-
|
|
|
- &.hasCn {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-tab-def {
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- // flex: 1;
|
|
|
- font-family: 'robot', 'alabo';
|
|
|
- word-break: break-word;
|
|
|
- white-space: pre-wrap;
|
|
|
-
|
|
|
- &.NPC-word-tab-def-red {
|
|
|
- color: #e35454;
|
|
|
- }
|
|
|
-
|
|
|
- &.NPC-word-tab-def-green {
|
|
|
- color: #24b99e;
|
|
|
- }
|
|
|
-
|
|
|
- &.NPC-word-tab-def-brown {
|
|
|
- color: #bd8865;
|
|
|
- }
|
|
|
+.newWord-template-preview {
|
|
|
+ .item-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: end;
|
|
|
}
|
|
|
|
|
|
- .collocation {
|
|
|
+ .number-box {
|
|
|
display: flex;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- // padding-top: 8px;
|
|
|
-
|
|
|
- > span {
|
|
|
- flex-shrink: 0;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 24px;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
+ height: 80px;
|
|
|
+ margin-right: 16px;
|
|
|
|
|
|
- > div b {
|
|
|
+ .number {
|
|
|
display: block;
|
|
|
- }
|
|
|
-
|
|
|
- > b,
|
|
|
- > div b {
|
|
|
- flex: 1;
|
|
|
- font-family: 'robot', '楷体', 'alabo';
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 400;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ font-family: 'arial';
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
line-height: 24px;
|
|
|
- color: rgba(0, 0, 0, 65%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes firstrotate {
|
|
|
- 0% {
|
|
|
- transform: rotateZ(0deg);
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- transform: rotateZ(180deg);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes huifuRotate {
|
|
|
- 0% {
|
|
|
- transform: rotateZ(180deg);
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- transform: rotateZ(0deg);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .luyin-box-wordphrase {
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-word-tile {
|
|
|
- display: flex;
|
|
|
- flex-flow: wrap;
|
|
|
- gap: 20px;
|
|
|
- padding: 20px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .writeTop {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- column-gap: 8px;
|
|
|
- width: 400px;
|
|
|
-
|
|
|
- .left,
|
|
|
- .right {
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- min-height: 270px;
|
|
|
- padding: 8px 12px 18px;
|
|
|
- overflow: hidden;
|
|
|
- background: #fff;
|
|
|
- border: 4px solid #fff;
|
|
|
- border-radius: 24px;
|
|
|
-
|
|
|
- .header-info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 12px;
|
|
|
-
|
|
|
- :deep .el-input__inner {
|
|
|
- height: 24px;
|
|
|
- padding: 0;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 100%;
|
|
|
- color: rgba(0, 0, 0, 100%);
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .label {
|
|
|
- :deep .el-input__inner {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- min-height: 332px;
|
|
|
- transition: 0.6s;
|
|
|
- perspective: 1000px;
|
|
|
- transform-style: preserve-3d;
|
|
|
-
|
|
|
- .left-preview {
|
|
|
- padding-top: 40px;
|
|
|
-
|
|
|
- // padding-bottom: 32px;
|
|
|
- // position: absolute;
|
|
|
- backface-visibility: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .header-info-preview {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 1;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- h5 {
|
|
|
- padding: 0 12px;
|
|
|
- margin: 0;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32px;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- label {
|
|
|
- position: absolute;
|
|
|
- top: -4px;
|
|
|
- right: -4px;
|
|
|
- padding: 0 16px 0 8px;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 150%;
|
|
|
- color: #fff;
|
|
|
- background: #fff;
|
|
|
- border-radius: 0 8px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .left-big {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .del-btn {
|
|
|
- position: absolute;
|
|
|
- right: 8px;
|
|
|
- bottom: 8px;
|
|
|
- padding: 5px 8px;
|
|
|
- font-size: 24px;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- background: #f56767;
|
|
|
- border-radius: 40px;
|
|
|
- }
|
|
|
-
|
|
|
- .overturn-btn {
|
|
|
- position: absolute;
|
|
|
- right: 8px;
|
|
|
- bottom: 8px;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- padding: 8px;
|
|
|
- font-size: 24px;
|
|
|
- line-height: 1;
|
|
|
color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- background: #e0e0e0;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-icon-zoom-in,
|
|
|
- .filt-check {
|
|
|
- position: absolute;
|
|
|
- bottom: 8px;
|
|
|
- left: 8px;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- font-size: 24px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- :deep .el-checkbox__inner {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- :deep .el-checkbox__inner::after {
|
|
|
- left: 8px;
|
|
|
- width: 6px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- flex-flow: wrap;
|
|
|
- row-gap: 8px;
|
|
|
- align-items: center;
|
|
|
- padding: 16px 24px 26px;
|
|
|
-
|
|
|
- .card-label {
|
|
|
- width: 100%;
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 22px;
|
|
|
- color: #4e5969;
|
|
|
- }
|
|
|
-
|
|
|
- :deep .el-textarea {
|
|
|
- height: 64px;
|
|
|
- }
|
|
|
-
|
|
|
- .config-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- span {
|
|
|
- margin-right: 8px;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 20px;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .el-color-picker {
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
-
|
|
|
- :deep .el-color-picker__trigger {
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-radio {
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-radio-group {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
- :deep .el-radio__input.is-checked .el-radio__inner {
|
|
|
- background: #000;
|
|
|
- border-color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- :deep .el-radio__input.is-checked + .el-radio__label {
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-preview {
|
|
|
- display: block;
|
|
|
- padding: 36px;
|
|
|
-
|
|
|
- .pinyin-box {
|
|
|
- margin-bottom: 8px;
|
|
|
- font-family: 'League';
|
|
|
- font-feature-settings: 'cv01' on;
|
|
|
-
|
|
|
- // font-size: 18px;
|
|
|
- line-height: 120%;
|
|
|
- color: #de4444;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .hz-box {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .hz-item {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- :deep .strockplayInner {
|
|
|
- width: 76px;
|
|
|
- height: 76px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- margin: 0 0 8px;
|
|
|
- font-family: 'League';
|
|
|
- font-size: 18px;
|
|
|
- font-feature-settings: 'cv01' on;
|
|
|
- line-height: 120%;
|
|
|
- color: #de4444;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- :deep .audio-wrapper {
|
|
|
- box-sizing: border-box;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- padding: 13px;
|
|
|
- margin: 0 auto 8px;
|
|
|
- cursor: pointer;
|
|
|
- background: #f3f3f3;
|
|
|
- border-radius: 40px;
|
|
|
-
|
|
|
- .voice-play {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .definition_list-box {
|
|
|
- margin-top: 16px;
|
|
|
- white-space: pre;
|
|
|
-
|
|
|
- > div {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 8px;
|
|
|
-
|
|
|
- label,
|
|
|
- p {
|
|
|
- width: 40px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 150%;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- label {
|
|
|
- width: 47px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- flex: 1;
|
|
|
- line-height: 0;
|
|
|
- word-break: break-word;
|
|
|
- white-space: pre-wrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- :deep p {
|
|
|
- margin: 0;
|
|
|
- line-height: 1.5;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-preview-rota {
|
|
|
- transform: rotateY(180deg);
|
|
|
- }
|
|
|
-
|
|
|
- .item-image {
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 0;
|
|
|
-
|
|
|
- // background: #f2f3f5;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .item-image-del {
|
|
|
- position: absolute;
|
|
|
- top: 8px;
|
|
|
- right: 8px;
|
|
|
- display: block;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- padding: 8px;
|
|
|
- font-size: 16px;
|
|
|
- color: #ee3232;
|
|
|
- cursor: pointer;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 25%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-con {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 50%;
|
|
|
- margin-top: 16px;
|
|
|
-
|
|
|
- label {
|
|
|
- width: 44px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 22px;
|
|
|
- color: #4e5969;
|
|
|
- }
|
|
|
-
|
|
|
- :deep .el-input__inner {
|
|
|
- width: 235px;
|
|
|
- height: 32px;
|
|
|
- font-family: '楷体';
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 22px;
|
|
|
- background: #f2f3f5;
|
|
|
- border: none;
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .pinyin {
|
|
|
- :deep .el-input__inner {
|
|
|
- font-family: 'League';
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .con-preview {
|
|
|
- margin-top: 8px;
|
|
|
- font-family: '楷体';
|
|
|
- font-size: 38px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 100%;
|
|
|
- color: #000;
|
|
|
text-align: center;
|
|
|
-
|
|
|
- &-big {
|
|
|
- margin: 0;
|
|
|
- font-size: 86px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .writeTop-row {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
+ background: #346cda;
|
|
|
+ border-radius: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .flipped {
|
|
|
- transform: rotateY(180deg);
|
|
|
- }
|
|
|
-
|
|
|
- .flipped-back {
|
|
|
- transform: rotateY(180deg);
|
|
|
- }
|
|
|
-
|
|
|
- .hz-box {
|
|
|
- display: flex;
|
|
|
- width: max-content;
|
|
|
- }
|
|
|
-
|
|
|
- .writeTop-item {
|
|
|
- border: 1px solid #de4444;
|
|
|
- }
|
|
|
-
|
|
|
- .writeTop-item-noLeft {
|
|
|
- border-left: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.newWord-table {
|
|
|
- .cell {
|
|
|
- width: max-content;
|
|
|
- white-space: nowrap;
|
|
|
+ .items {
|
|
|
+ font-size: 0;
|
|
|
}
|
|
|
|
|
|
- :deep thead {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-.NPC-zhedie {
|
|
|
- .topTitle {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
- height: 48px;
|
|
|
- padding-right: 16px;
|
|
|
- padding-left: 24px;
|
|
|
+ .items-image,
|
|
|
+ .hanzi-storck {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
overflow: hidden;
|
|
|
- background: #e35454;
|
|
|
- border: 1px solid rgba(0, 0, 0, 10%);
|
|
|
- border-radius: 8px 8px 0 0;
|
|
|
-
|
|
|
- .NPC-top-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- .NPC-topTitle-text {
|
|
|
- margin-right: 8px;
|
|
|
- font-family: 'sourceR';
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff;
|
|
|
- white-space: pre;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-top-right {
|
|
|
- display: flex;
|
|
|
- gap: 4px;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &-text {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: normal;
|
|
|
- line-height: 16px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .rotate {
|
|
|
- animation-name: firstrotate;
|
|
|
- animation-timing-function: linear;
|
|
|
- animation-direction: 2s;
|
|
|
- animation-fill-mode: both;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .topTitleWhite {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
- height: 48px;
|
|
|
- padding-right: 16px;
|
|
|
- padding-left: 24px;
|
|
|
- overflow: hidden;
|
|
|
- background: #fff;
|
|
|
- border: 1px solid rgba(0, 0, 0, 10%);
|
|
|
- border-radius: 8px 8px 0 0;
|
|
|
-
|
|
|
- .NPC-top-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- .NPC-topTitle-text {
|
|
|
- margin-right: 8px;
|
|
|
- font-family: 'sourceR';
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .NPC-top-right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &-text {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: normal;
|
|
|
- line-height: 16px;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .rotate {
|
|
|
- animation-name: firstrotate;
|
|
|
- animation-timing-function: linear;
|
|
|
- animation-direction: 2s;
|
|
|
- animation-fill-mode: both;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-collapse-item__content {
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .el-slider__button {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-slider__runway {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .el-slider {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- // top: -3px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-collapse {
|
|
|
- box-sizing: border-box;
|
|
|
- background: #f7f7f7;
|
|
|
+ border: 2px solid #346cda;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
- .el-collapse-item__wrap {
|
|
|
- background: #f7f7f7;
|
|
|
- border: 1px solid rgba(0, 0, 0, 10%);
|
|
|
- border-top: 0;
|
|
|
- border-radius: 0 0 8px 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-collapse-item__arrow {
|
|
|
- display: none;
|
|
|
+ .items-lian {
|
|
|
+ display: block;
|
|
|
+ height: 80px;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 34px;
|
|
|
+ line-height: 80px;
|
|
|
+ color: #346cda;
|
|
|
}
|
|
|
|
|
|
- .el-table__row {
|
|
|
- padding: 4px 0;
|
|
|
+ .hanzi-storck {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
natasha
