|
|
@@ -1,79 +1,86 @@
|
|
|
<template>
|
|
|
- <!-- 选择偏旁部首组成汉字 -->
|
|
|
- <div class="ChineseRadical Book_enter_container" v-if="curQue">
|
|
|
- <el-form-item label="文字">
|
|
|
- <el-input
|
|
|
- :key="item + i"
|
|
|
- @blur="onBlur(item, 'con')"
|
|
|
- @change="changChinese"
|
|
|
- placeholder="请输入文字"
|
|
|
- style="width: 300px; margin-bottom: 10px"
|
|
|
- v-for="(item, i) in curQue.stem"
|
|
|
- v-model="item.con"
|
|
|
- />
|
|
|
- <Upload
|
|
|
- :changeFillId="changeMp3"
|
|
|
- :datafileList="curQue.stem.length > 0 && curQue.stem[0].mp3List"
|
|
|
- :filleNumber="filleNumber"
|
|
|
- :uploadType="'mp3'"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="拼音">
|
|
|
- <div class="Book_flex">
|
|
|
- <el-input
|
|
|
- :key="item + i"
|
|
|
- @blur="onBlur(item, 'pinyin')"
|
|
|
- placeholder="请输入拼音"
|
|
|
- style="width: 300px"
|
|
|
- v-for="(item, i) in curQue.stem"
|
|
|
- v-model="item.pinyin"
|
|
|
- />
|
|
|
- <div @click="getPinyin(item)" class="insert_pinyin">
|
|
|
- <img class="pinyin_icon" src="../../../assets/common/pinyin.png">
|
|
|
- <span>插入拼音</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label>
|
|
|
- <div :key="i" class="itemlist" v-for="(item, i) in curQue.option">
|
|
|
- <span style="margin-right: 10px">选项{{ i + 1 }}</span>
|
|
|
- <el-select @change="handleChange(item)" placeholder="请选择" v-model="item.img_url">
|
|
|
- <el-option
|
|
|
- :disabled="opitem.isDisable"
|
|
|
- :key="opitem.resource_key"
|
|
|
- :label="opitem.index_memo"
|
|
|
- :value="opitem.id"
|
|
|
- v-for="opitem in structureListRes"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- <img :src="item.con" class="img_url" v-if="item.img_url">
|
|
|
- <el-radio
|
|
|
- :label="i"
|
|
|
- @change="changeAnswer(i)"
|
|
|
- style="margin-left: 10px"
|
|
|
- v-model="item.isAnswer"
|
|
|
- >正确答案</el-radio>
|
|
|
- <div class="add">
|
|
|
- <div @click="removeOption(i)"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="Remove">
|
|
|
- <div @click="addOption"></div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item label="功能设置">
|
|
|
+ <!-- 选择偏旁部首组成汉字 -->
|
|
|
+ <div class="ChineseRadical Book_enter_container" v-if="curQue">
|
|
|
+ <el-form-item label="文字">
|
|
|
+ <el-input
|
|
|
+ :key="item + i"
|
|
|
+ @blur="onBlur(item, 'con')"
|
|
|
+ @change="changChinese"
|
|
|
+ placeholder="请输入文字"
|
|
|
+ style="width: 300px; margin-bottom: 10px"
|
|
|
+ v-for="(item, i) in curQue.stem"
|
|
|
+ v-model="item.con"
|
|
|
+ />
|
|
|
+ <Upload
|
|
|
+ :changeFillId="changeMp3"
|
|
|
+ :datafileList="curQue.stem.length > 0 && curQue.stem[0].mp3List"
|
|
|
+ :filleNumber="filleNumber"
|
|
|
+ :uploadType="'mp3'"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="拼音">
|
|
|
+ <div class="Book_flex">
|
|
|
+ <el-input
|
|
|
+ :key="item + i"
|
|
|
+ @blur="onBlur(item, 'pinyin')"
|
|
|
+ placeholder="请输入拼音"
|
|
|
+ style="width: 300px"
|
|
|
+ v-for="(item, i) in curQue.stem"
|
|
|
+ v-model="item.pinyin"
|
|
|
+ />
|
|
|
+ <div @click="getPinyin(item)" class="insert_pinyin">
|
|
|
+ <img class="pinyin_icon" src="../../../assets/common/pinyin.png" />
|
|
|
+ <span>插入拼音</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label>
|
|
|
+ <div :key="i" class="itemlist" v-for="(item, i) in curQue.option">
|
|
|
+ <span style="margin-right: 10px">选项{{ i + 1 }}</span>
|
|
|
+ <el-select
|
|
|
+ @change="handleChange(item)"
|
|
|
+ placeholder="请选择"
|
|
|
+ v-model="item.img_url"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :disabled="opitem.isDisable"
|
|
|
+ :key="opitem.resource_key"
|
|
|
+ :label="opitem.index_memo"
|
|
|
+ :value="opitem.id"
|
|
|
+ v-for="opitem in structureListRes"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <img :src="item.con" class="img_url" v-if="item.img_url" />
|
|
|
+ <el-radio
|
|
|
+ :label="i"
|
|
|
+ @change="changeAnswer(i)"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ v-model="item.isAnswer"
|
|
|
+ >正确答案</el-radio
|
|
|
+ >
|
|
|
+ <div class="add">
|
|
|
+ <div @click="removeOption(i)"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="Remove">
|
|
|
+ <div @click="addOption"></div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="功能设置">
|
|
|
<el-checkbox v-model="curQue.playStorkes">播放笔顺</el-checkbox>
|
|
|
</el-form-item>-->
|
|
|
- <el-form-item style="text-align: right; padding-right: 20px">
|
|
|
- <el-button @click="saveCurque" style="margin-right: 10px" type="primary">保存</el-button>
|
|
|
- <el-popconfirm @onConfirm="removeCurque" title="确定删除吗？">
|
|
|
- <el-button slot="reference" type="primary">删除</el-button>
|
|
|
- </el-popconfirm>
|
|
|
- <!-- <el-popconfirm title="这是一段内容确定删除吗？">
|
|
|
+ <el-form-item style="text-align: right; padding-right: 20px">
|
|
|
+ <el-button @click="saveCurque" style="margin-right: 10px" type="primary"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
+ <el-popconfirm @onConfirm="removeCurque" title="确定删除吗？">
|
|
|
+ <el-button slot="reference" type="primary">删除</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ <!-- <el-popconfirm title="这是一段内容确定删除吗？">
|
|
|
<el-button type="primary" @click="removeCurque">刪除</el-button>
|
|
|
</el-popconfirm>-->
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -81,251 +88,257 @@ import Upload from "../../../components/inputModules/common/Upload";
|
|
|
import "../../../utils/pinyin_dict_withtone";
|
|
|
import "../../../utils/pinyinUtil";
|
|
|
export default {
|
|
|
- name: "ChineseStrokes",
|
|
|
- props: ["curQue", "changeDataList", "saveCacheData", "removeCaheData", "hanziSideList"],
|
|
|
- components: {
|
|
|
- Upload,
|
|
|
+ name: "ChineseStrokes",
|
|
|
+ props: [
|
|
|
+ "curQue",
|
|
|
+ "changeDataList",
|
|
|
+ "saveCacheData",
|
|
|
+ "removeCaheData",
|
|
|
+ "hanziSideList",
|
|
|
+ ],
|
|
|
+ components: {
|
|
|
+ Upload,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ item: [
|
|
|
+ "ā",
|
|
|
+ "á",
|
|
|
+ "ǎ",
|
|
|
+ "à",
|
|
|
+ "ō",
|
|
|
+ "ó",
|
|
|
+ "ǒ",
|
|
|
+ "ò",
|
|
|
+ "ē",
|
|
|
+ "é",
|
|
|
+ "ě",
|
|
|
+ "è",
|
|
|
+ "ī",
|
|
|
+ "í",
|
|
|
+ "ǐ",
|
|
|
+ "ì",
|
|
|
+ "ū",
|
|
|
+ "ú",
|
|
|
+ "ǔ",
|
|
|
+ "ù",
|
|
|
+ "ǖ",
|
|
|
+ "ǘ",
|
|
|
+ "ǚ",
|
|
|
+ "ǜ",
|
|
|
+ ],
|
|
|
+ targetitem: {
|
|
|
+ // mp3: "", //音频
|
|
|
+ // option: [
|
|
|
+ // {
|
|
|
+ // con: "",
|
|
|
+ // isAnswer: "",
|
|
|
+ // },
|
|
|
+ // ], //选项
|
|
|
+ // correct: [], //正确答案
|
|
|
+ // type: "", //题的类型
|
|
|
+ // content: "", //题干
|
|
|
+ },
|
|
|
+ spellShow: false,
|
|
|
+ optionIndex: null,
|
|
|
+ filleNumber: 1,
|
|
|
+ structureListRes: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ hanziSideList: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ let _this = this;
|
|
|
+ if (val) {
|
|
|
+ _this.structureListRes = _this.handleStructureList(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
},
|
|
|
- data () {
|
|
|
- return {
|
|
|
- item: [
|
|
|
- "ā",
|
|
|
- "á",
|
|
|
- "ǎ",
|
|
|
- "à",
|
|
|
- "ō",
|
|
|
- "ó",
|
|
|
- "ǒ",
|
|
|
- "ò",
|
|
|
- "ē",
|
|
|
- "é",
|
|
|
- "ě",
|
|
|
- "è",
|
|
|
- "ī",
|
|
|
- "í",
|
|
|
- "ǐ",
|
|
|
- "ì",
|
|
|
- "ū",
|
|
|
- "ú",
|
|
|
- "ǔ",
|
|
|
- "ù",
|
|
|
- "ǖ",
|
|
|
- "ǘ",
|
|
|
- "ǚ",
|
|
|
- "ǜ",
|
|
|
- ],
|
|
|
- targetitem: {
|
|
|
- // mp3: "", //音频
|
|
|
- // option: [
|
|
|
- // {
|
|
|
- // con: "",
|
|
|
- // isAnswer: "",
|
|
|
- // },
|
|
|
- // ], //选项
|
|
|
- // correct: [], //正确答案
|
|
|
- // type: "", //题的类型
|
|
|
- // content: "", //题干
|
|
|
- },
|
|
|
- spellShow: false,
|
|
|
- optionIndex: null,
|
|
|
- filleNumber: 1,
|
|
|
- structureListRes: [],
|
|
|
- };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChange(opItem) {
|
|
|
+ let option = this.curQue.option;
|
|
|
+ this.structureListRes.map((item) => {
|
|
|
+ if (item.id == opItem.img_url) {
|
|
|
+ opItem.con = item.file_url;
|
|
|
+ }
|
|
|
+ let opArr = option.filter((opitem) => opitem.img_url == item.id);
|
|
|
+ if (opArr.length > 0) {
|
|
|
+ item.isDisable = true;
|
|
|
+ } else {
|
|
|
+ item.isDisable = false;
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
},
|
|
|
- watch: {
|
|
|
- hanziSideList: {
|
|
|
- handler: function (val, oldVal) {
|
|
|
- let _this = this;
|
|
|
- if (val) {
|
|
|
- _this.structureListRes = _this.handleStructureList(val);
|
|
|
- }
|
|
|
- },
|
|
|
- // 深度观察监听
|
|
|
- deep: true,
|
|
|
- },
|
|
|
+ // 去除首位的空格
|
|
|
+ onBlur(item, field) {
|
|
|
+ item[field] = item[field] ? item[field].trim() : "";
|
|
|
},
|
|
|
- methods: {
|
|
|
- handleChange (opItem) {
|
|
|
- let option = this.curQue.option;
|
|
|
- this.structureListRes.map((item) => {
|
|
|
- if (item.id == opItem.img_url) {
|
|
|
- opItem.con = item.file_url;
|
|
|
- }
|
|
|
- let opArr = option.filter((opitem) => opitem.img_url == item.id);
|
|
|
- if (opArr.length > 0) {
|
|
|
- item.isDisable = true;
|
|
|
- } else {
|
|
|
- item.isDisable = false;
|
|
|
- }
|
|
|
- return item;
|
|
|
- });
|
|
|
- },
|
|
|
- // 去除首位的空格
|
|
|
- onBlur (item, field) {
|
|
|
- item[field] = item[field] ? item[field].trim() : "";
|
|
|
- },
|
|
|
- // 上传音频
|
|
|
- changeMp3 (id, fileList, duration) {
|
|
|
- this.curQue.stem[0].mp3_url = id ? "[FID##" + id + "##FID]" : "";
|
|
|
- this.curQue.stem[0].duration = duration ? duration : 0;
|
|
|
- this.curQue.stem[0].mp3List = fileList;
|
|
|
- },
|
|
|
- // 修改文字
|
|
|
- changChinese (e) {
|
|
|
- if (e == "") {
|
|
|
- this.curQue.stem.forEach((item) => {
|
|
|
- item.pinyin = " ";
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 保存单个题
|
|
|
- saveCurque () {
|
|
|
- this.saveCacheData();
|
|
|
- },
|
|
|
- removeCurque () {
|
|
|
- this.removeCaheData();
|
|
|
- },
|
|
|
- // 点击生成拼音
|
|
|
- getPinyin () {
|
|
|
- let bool = false;
|
|
|
- let value = "";
|
|
|
- this.curQue.stem.forEach((item) => {
|
|
|
- if (item.con == "") {
|
|
|
- this.$message.info("请先输入内容,再生成拼音");
|
|
|
- bool = true;
|
|
|
- } else {
|
|
|
- value = item.con;
|
|
|
- }
|
|
|
- });
|
|
|
- if (bool) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let result = pinyinUtil.getPinyin(value);
|
|
|
- this.curQue.stem.forEach((item) => {
|
|
|
- item.pinyin = result;
|
|
|
- });
|
|
|
- },
|
|
|
- changeAnswer(index) {
|
|
|
- this.curQue.option.forEach((item, i) => {
|
|
|
- if (i == index) {
|
|
|
- this.curQue.correct[0] = item.img_url;
|
|
|
- } else {
|
|
|
- this.$set(this.curQue.option[i], "isAnswer", "");
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- addOption (index) {
|
|
|
- let flag = false;
|
|
|
- this.curQue.option.forEach((item) => {
|
|
|
- if (item.con == "") {
|
|
|
- flag = true;
|
|
|
- }
|
|
|
- });
|
|
|
- if (flag) {
|
|
|
- this.$message.info("请先填空再增加选项");
|
|
|
- return;
|
|
|
- }
|
|
|
- let obj = {
|
|
|
- con: "",
|
|
|
- };
|
|
|
- this.curQue.option.push(obj);
|
|
|
- },
|
|
|
- removeOption (index) {
|
|
|
- if (this.curQue.option.length <= 2) {
|
|
|
- this.$message.info("至少要有两个选项");
|
|
|
- return;
|
|
|
- }
|
|
|
- this.curQue.option.splice(index, 1);
|
|
|
- this.handleChange();
|
|
|
- },
|
|
|
- handleStructureList (arr) {
|
|
|
- let _this = this;
|
|
|
- arr = arr.map((item, index) => {
|
|
|
- item.id = "[FID##" + item.file_id + "##FID]";
|
|
|
- let opArr = _this.curQue.option.filter(
|
|
|
- (opitem) => opitem.img_url == item.id
|
|
|
- );
|
|
|
- if (opArr.length > 0) {
|
|
|
- item.isDisable = true;
|
|
|
- } else {
|
|
|
- item.isDisable = false;
|
|
|
- }
|
|
|
- item.index = index + 1;
|
|
|
- item.index_memo = `${item.index}. ${item.memo}`;
|
|
|
- return item;
|
|
|
- });
|
|
|
-
|
|
|
- return arr;
|
|
|
- },
|
|
|
+ // 上传音频
|
|
|
+ changeMp3(id, fileList, duration) {
|
|
|
+ this.curQue.stem[0].mp3_url = id ? "[FID##" + id + "##FID]" : "";
|
|
|
+ this.curQue.stem[0].duration = duration ? duration : 0;
|
|
|
+ this.curQue.stem[0].mp3List = fileList;
|
|
|
},
|
|
|
- created () { },
|
|
|
- mounted () {
|
|
|
- let _this = this;
|
|
|
- _this.structureListRes = _this.handleStructureList(this.hanziSideList);
|
|
|
+ // 修改文字
|
|
|
+ changChinese(e) {
|
|
|
+ if (e == "") {
|
|
|
+ this.curQue.stem.forEach((item) => {
|
|
|
+ item.pinyin = " ";
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 保存单个题
|
|
|
+ saveCurque() {
|
|
|
+ this.saveCacheData();
|
|
|
+ },
|
|
|
+ removeCurque() {
|
|
|
+ this.removeCaheData();
|
|
|
+ },
|
|
|
+ // 点击生成拼音
|
|
|
+ getPinyin() {
|
|
|
+ let bool = false;
|
|
|
+ let value = "";
|
|
|
+ this.curQue.stem.forEach((item) => {
|
|
|
+ if (item.con == "") {
|
|
|
+ this.$message.info("请先输入内容,再生成拼音");
|
|
|
+ bool = true;
|
|
|
+ } else {
|
|
|
+ value = item.con;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (bool) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let result = pinyinUtil.getPinyin(value);
|
|
|
+ this.curQue.stem.forEach((item) => {
|
|
|
+ item.pinyin = result;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeAnswer(index) {
|
|
|
+ this.curQue.option.forEach((item, i) => {
|
|
|
+ if (i == index) {
|
|
|
+ this.curQue.correct[0] = item.img_url;
|
|
|
+ } else {
|
|
|
+ this.$set(this.curQue.option[i], "isAnswer", "");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addOption(index) {
|
|
|
+ let flag = false;
|
|
|
+ this.curQue.option.forEach((item) => {
|
|
|
+ if (item.con == "") {
|
|
|
+ flag = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (flag) {
|
|
|
+ this.$message.info("请先填空再增加选项");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let obj = {
|
|
|
+ con: "",
|
|
|
+ };
|
|
|
+ this.curQue.option.push(obj);
|
|
|
+ },
|
|
|
+ removeOption(index) {
|
|
|
+ if (this.curQue.option.length <= 2) {
|
|
|
+ this.$message.info("至少要有两个选项");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.curQue.option.splice(index, 1);
|
|
|
+ this.handleChange();
|
|
|
+ },
|
|
|
+ handleStructureList(arr) {
|
|
|
+ let _this = this;
|
|
|
+ arr = arr.map((item, index) => {
|
|
|
+ item.id = "[FID##" + item.file_id + "##FID]";
|
|
|
+ let opArr = _this.curQue.option.filter(
|
|
|
+ (opitem) => opitem.img_url == item.id
|
|
|
+ );
|
|
|
+ if (opArr.length > 0) {
|
|
|
+ item.isDisable = true;
|
|
|
+ } else {
|
|
|
+ item.isDisable = false;
|
|
|
+ }
|
|
|
+ item.index = index + 1;
|
|
|
+ item.index_memo = `${item.index}. ${item.memo}`;
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+
|
|
|
+ return arr;
|
|
|
},
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ let _this = this;
|
|
|
+ _this.structureListRes = _this.handleStructureList(this.hanziSideList);
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.ChineseRadical {
|
|
|
- .pinyin {
|
|
|
- width: 400px;
|
|
|
- height: 180px;
|
|
|
- background: #ebebeb;
|
|
|
- border-radius: 5.3566px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 8px 10px;
|
|
|
- }
|
|
|
- .pinyin > div {
|
|
|
- margin: 5px;
|
|
|
- width: 32px;
|
|
|
- height: 35px;
|
|
|
- line-height: 32px;
|
|
|
- text-align: center;
|
|
|
- background: #fcfcfe;
|
|
|
- box-shadow: 0px 0.732069px 0px #898a8d;
|
|
|
- border-radius: 5.3566px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .Upload {
|
|
|
- cursor: pointer;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- .Upload img {
|
|
|
- position: relative;
|
|
|
- top: 4px;
|
|
|
- }
|
|
|
- .itemlist {
|
|
|
- margin-bottom: 10px;
|
|
|
- margin-left: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .add > div,
|
|
|
- .Remove > div {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border: 1px solid #000000;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-content: center;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .Remove > div {
|
|
|
- margin-left: 65px;
|
|
|
- margin-top: 10px;
|
|
|
- background: url('../../../assets/common/add.png') no-repeat 50%;
|
|
|
- }
|
|
|
- .add > div {
|
|
|
- margin-left: 10px;
|
|
|
- background: url('../../../assets/common/remove.png') no-repeat 50%;
|
|
|
- }
|
|
|
- .img_url {
|
|
|
- width: 38px;
|
|
|
- margin-left: 20px;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
- }
|
|
|
+ .pinyin {
|
|
|
+ width: 400px;
|
|
|
+ height: 180px;
|
|
|
+ background: #ebebeb;
|
|
|
+ border-radius: 5.3566px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 8px 10px;
|
|
|
+ }
|
|
|
+ .pinyin > div {
|
|
|
+ margin: 5px;
|
|
|
+ width: 32px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ background: #fcfcfe;
|
|
|
+ box-shadow: 0px 0.732069px 0px #898a8d;
|
|
|
+ border-radius: 5.3566px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .Upload {
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .Upload img {
|
|
|
+ position: relative;
|
|
|
+ top: 4px;
|
|
|
+ }
|
|
|
+ .itemlist {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-left: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .add > div,
|
|
|
+ .Remove > div {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px solid #000000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .Remove > div {
|
|
|
+ margin-left: 65px;
|
|
|
+ margin-top: 10px;
|
|
|
+ background: url("../../../assets/common/add.png") no-repeat 50%;
|
|
|
+ }
|
|
|
+ .add > div {
|
|
|
+ margin-left: 10px;
|
|
|
+ background: url("../../../assets/common/remove.png") no-repeat 50%;
|
|
|
+ }
|
|
|
+ .img_url {
|
|
|
+ width: 38px;
|
|
|
+ margin-left: 20px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
guanchunjie