| | |
| | | <template> |
| | | <div class="homeBox"> |
| | | <div class="headerBox"> |
| | | <!-- <span class="logoTxt">北京师范大学出版集团</span> --> |
| | | <img :src="logo" /> |
| | | <div class="userInfoBox"> |
| | | <div></div> |
| | |
| | | </div> |
| | | <div class="reload hover" @click="reload()">刷新</div> |
| | | <!-- 设置 --> |
| | | <el-popover placement="right" :width="200" trigger="click"> |
| | | <el-popover placement="right" :width="300" trigger="click"> |
| | | <div class="settingBox"> |
| | | <el-form :model="settingForm" label-width="auto" style="max-width: 400px"> |
| | | <el-form-item label="答题音效"> |
| | | <el-switch v-model="settingForm.acoustics" /> |
| | | <el-form-item label="字体大小"> |
| | | <div class="lineStyle"> |
| | | <div class="lineTypeBox"> |
| | | <div |
| | | v-for="item in settingForm.fontSizeList" |
| | | :key="item.key" |
| | | :class=" |
| | | settingForm.fontSizeActive == item.key |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " |
| | | @click="fontSizeSelect(item)" |
| | | > |
| | | {{ item.lable }} |
| | | <div class="activeIcon" v-if="settingForm.fontSizeActive == item.key"> |
| | | <img :src="xuanzhong" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="答题动画"> |
| | | <el-switch v-model="settingForm.animation" /> |
| | | <div class="inline"> |
| | | <el-form-item label="答题音效"> |
| | | <el-switch v-model="settingForm.acoustics" /> |
| | | </el-form-item> |
| | | <el-form-item label="答题动画"> |
| | | <el-switch v-model="settingForm.animation" /> |
| | | </el-form-item> |
| | | </div> |
| | | <el-form-item label="底色"> |
| | | <div class="bgColor"> |
| | | <div |
| | | v-for="item in settingForm.bgColorList" |
| | | :key="item.key" |
| | | class="flex1 hover" |
| | | @click="bgColorSelect(item)" |
| | | > |
| | | <div |
| | | :style="{ |
| | | background: item.key, |
| | | 'border-color': |
| | | item.key == settingForm.bgColorActive ? '#0093FF' : '#EBEBEB' |
| | | }" |
| | | class="scribeItem" |
| | | > |
| | | <img :src="xuanzhong1" v-if="item.key == settingForm.bgColorActive" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | |
| | | <div class="title"> |
| | | <div class="title-con"> |
| | | <div class="border-left" :style="{ 'border-right-color': item.color }"></div> |
| | | <span>{{ item.createDate }}{{item.color}}</span> |
| | | <span>{{ item.createDate }}</span> |
| | | </div> |
| | | <div> |
| | | <img :src="bianji" @click="update(item, 'note')" /> |
| | |
| | | class="noteText hover" |
| | | @click="jumpContent('note' + index)" |
| | | :style="{ |
| | | 'background': |
| | | background: |
| | | item.color == '#F5E12A' |
| | | ? 'rgba(255,234,41,0.1)' |
| | | : item.color == '#76F0AE' |
| | |
| | | <div class="inputBox" v-if="!searchShow"> |
| | | <el-input class="custom-input" placeholder="请输入内容" v-model="searchText"> |
| | | <template #prefix> |
| | | <el-icon @click="searchBook"><Search /></el-icon> |
| | | <el-icon @click="searchBook" class="hover"><Search /></el-icon> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | |
| | | <div v-if="resourceDataList.length > 0" class="resourceList"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12" v-for="(item, index) in resourceDataList" :key="item"> |
| | | <div class="resourceItem hover"> |
| | | <div class="resourceItem hover" @click="goResourceDetail(item)"> |
| | | <div class="resourceImg"> |
| | | <img :src="video" mode="" /> |
| | | </div> |
| | | <div class="rName" @click="goResourceDetail(item)">{{ item.name }}</div> |
| | | <div class="rName" v-if="searchText !=''" v-html="item.name"></div> |
| | | <div class="rName" v-else>{{ item.name }}</div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | class="captureItem" |
| | | @click="getCapture(item)" |
| | | > |
| | | <img :src="item.imgUrl" class="capture" mode="aspectFill" /> |
| | | <div class="imgBox"> |
| | | <img :src="item.imgUrl" class="capture" mode="aspectFill" /> |
| | | </div> |
| | | <div class="captureName">{{ item.name }}</div> |
| | | </div> |
| | | </div> |
| | | <div v-else> |
| | |
| | | <!-- 教学组件 --> |
| | | <div class="toolBox"> |
| | | <div class="toolTitle"> |
| | | 教学组件 |
| | | <span>{{ toolState.open ? '教学组件' : '组件' }}</span> |
| | | <div class="text"></div> |
| | | </div> |
| | | <div class="menuList"> |
| | |
| | | ? 200 |
| | | : 250 |
| | | " |
| | | trigger="hover" |
| | | trigger="click" |
| | | v-if=" |
| | | floatingToolData.activeToolData == '画笔' || |
| | | floatingToolData.activeToolData == '清除' || |
| | |
| | | @click="clickSelect(item)" |
| | | > |
| | | <div :style="{ background: item.key }" class="scribeItem"> |
| | | <img :src="xuanzhong" v-if="item.key == colorActive" /> |
| | | <img :src="xuanzhong1" v-if="item.key == colorActive" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-dialog title="资源" align-center v-model="resourVisble" width="840"> |
| | | <el-dialog title="资源" align-center v-model="resourVisble" width="845" class="resourDialog"> |
| | | <div class="videoBox" v-if="resourType == 'video'"> |
| | | <video controls object-fit="fill" :src="testVideo"></video> |
| | | </div> |
| | |
| | | width="60%" |
| | | :closeOnClickModal="false" |
| | | title="图片" |
| | | class="resourDialog" |
| | | > |
| | | <div class="imgUrlBox"> |
| | | <img :src="imgUrl" mode="aspectFill" /> |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog |
| | | title="保存截图" |
| | | align-center |
| | | v-model="screenshotVisble" |
| | | :before-close="screenshotClose" |
| | | width="400" |
| | | class="resourDialog" |
| | | > |
| | | <div class="formBox"> |
| | | <el-input v-model="nameData" placeholder="请输入截图名称"></el-input> |
| | | </div> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="screenshotClose">取 消</el-button> |
| | | <el-button type="primary" @click="addScreenshot">确 定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog title="百度百科" align-center v-model="baiduVisible" width="60%" class="myDialogs"> |
| | | <div class="wendabox"> |
| | | <iframe :src="'https://baike.baidu.com/item/'+ selectText" frameborder="0"></iframe> |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog title="AI智能问答" align-center v-model="wendaVisible" width="26%" class="myDialogs"> |
| | |
| | | </el-dialog> |
| | | <el-dialog title="词典" align-center v-model="cidianVisible" width="60%" class="myDialogs"> |
| | | <div class="wendabox"> |
| | | <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> |
| | | <!-- <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> --> |
| | | <dictionary :searchCon="selectText" /> |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog |
| | |
| | | |
| | | <script setup lang="ts"> |
| | | import { ref, reactive, watch, onMounted, inject } from 'vue' |
| | | import { ctxUrl } from '@/assets/js/config' |
| | | import { useRouter, useRoute } from 'vue-router' |
| | | import useClipboard from 'vue-clipboard3' |
| | | const { toClipboard } = useClipboard() |
| | |
| | | //获取当前路由的信息 |
| | | let route = useRoute() |
| | | import moment from 'moment' |
| | | import dictionary from '@/views/components/dictionary.vue' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import logo from '@/assets/images/header/logo.png' |
| | | import mulu from '@/assets/images/menu/mulu.png' |
| | |
| | | import AIyuedu1 from '../assets/images/operation/AIyuedu-b.png' |
| | | import cidian2 from '../assets/images/operation/cidian.png' |
| | | import cidian1 from '../assets/images/operation/cidian-b.png' |
| | | import baidu from '../assets/images/operation/baidu.png' |
| | | import baidu1 from '../assets/images/operation/baidu-b.png' |
| | | import yuyinyuedu from '../assets/images/operation/yuyinyuedu.png' |
| | | import yuyinyuedu1 from '../assets/images/operation/yuyinyuedu-b.png' |
| | | import xuanzhong from '../assets/images/operation/xuanzhong.png' |
| | | import xuanzhong1 from '../assets/images/operation/xuanzhong1.png' |
| | | |
| | | import zoomIn from '../assets/images/operation/zoomIn.png' |
| | | import zoomOut from '../assets/images/operation/zoomOut.png' |
| | |
| | | import { fabric } from 'fabric' |
| | | const canvasWith = ref(1000) |
| | | const canvasheight = ref(3000) |
| | | |
| | | const screenWidth = ref( |
| | | window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
| | | ) |
| | | onMounted(() => { |
| | | // canvasWith.value = window.innerWidth - 540 |
| | | // canvasheight.value = window.innerHeight - 110 |
| | |
| | | // canvasWith.value = document.getElementById('container').offsetWidth |
| | | // canvasheight.value = document.getElementById('container').offsetHeight |
| | | // }, 5000) |
| | | if (screenWidth.value < 1180) { |
| | | menuState.open = false |
| | | toolState.open = false |
| | | } |
| | | window.onresize = () => { |
| | | return (() => { |
| | | screenWidth.value = |
| | | window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
| | | })() |
| | | } |
| | | }) |
| | | |
| | | watch( |
| | | () => screenWidth.value, |
| | | (val) => { |
| | | screenWidth.value = val |
| | | if (screenWidth.value < 1180) { |
| | | menuState.open = false |
| | | toolState.open = false |
| | | } |
| | | } |
| | | ) |
| | | //获取目录 |
| | | const catalogueData = ref([]) |
| | | const getCatalogueData = () => { |
| | | axios |
| | | .get('http://182.92.203.7:3007/books/test/information.json') |
| | | .get(ctxUrl + '/books/test/information.json') |
| | | .then(function (response) { |
| | | var json = response.data |
| | | // 处理获取到的json数据 |
| | |
| | | const testWord = ref('') //word链接 |
| | | const getResourceData = () => { |
| | | axios |
| | | .get('http://182.92.203.7:3007/books/test/resource.json') |
| | | .get(ctxUrl + '/books/test/resource.json') |
| | | .then(function (response) { |
| | | var json = response.data |
| | | // 处理获取到的json数据 |
| | |
| | | } |
| | | |
| | | const goResourceDetail = (data) => { |
| | | console.log(data, 23) |
| | | resourVisble.value = true |
| | | resourType.value = data.type |
| | | if (data.type == 'video') { |
| | | testVideo.value = 'http://182.92.203.7:3007/books/test/resourceData/' + data.name |
| | | testVideo.value = ctxUrl + '/books/test/resourceData/' + data.name |
| | | } else if (data.type == 'word') { |
| | | testWord.value = 'http://182.92.203.7:3007/books/test/resourceData/' + data.name |
| | | testWord.value = ctxUrl + '/books/test/resourceData/' + data.name |
| | | } |
| | | } |
| | | |
| | | const classifyClick = (item) => { |
| | | activeClassify.value = item.key |
| | | resourceDataList.value = [] |
| | | |
| | | searchText.value = '' |
| | | switch (item.key) { |
| | | case 'image': |
| | | resourceDataList.value = resourceData.value.imgList |
| | |
| | | }) |
| | | |
| | | const settingForm = reactive({ |
| | | fontSizeList: [ |
| | | { |
| | | lable: '小', |
| | | key: '14' |
| | | }, |
| | | { |
| | | lable: '中', |
| | | key: '16' |
| | | }, |
| | | |
| | | { |
| | | lable: '大', |
| | | key: '20' |
| | | } |
| | | ], |
| | | fontSizeActive: '16', |
| | | acoustics: false, |
| | | animation: false |
| | | animation: false, |
| | | bgColorList: [ |
| | | { |
| | | lable: '黄', |
| | | key: '#FBF9F4' |
| | | }, |
| | | { |
| | | lable: '绿', |
| | | key: '#F2FFF7' |
| | | }, |
| | | { |
| | | lable: '紫', |
| | | key: '#F6F4FC' |
| | | }, |
| | | { |
| | | lable: '粉', |
| | | key: '#FFFAF9' |
| | | } |
| | | ], |
| | | bgColorActive: '#FBF9F4' |
| | | }) |
| | | const fontSizeSelect = (item) => { |
| | | settingForm.fontSizeActive = item.key |
| | | } |
| | | const bgColorSelect = (item) => { |
| | | settingForm.bgColorActive = item.key |
| | | } |
| | | //笔记颜色筛选 |
| | | const searchClick = (item) => { |
| | | if (item != 'all') { |
| | |
| | | const searchBook = async () => { |
| | | if (activeMenu.value == 1) { |
| | | getNotesList() |
| | | } |
| | | if (activeMenu.value == 2) { |
| | | let dataList = JSON.parse(JSON.stringify(resourceDataList.value)) |
| | | if (searchText.value) { |
| | | resourceDataList.value = [] |
| | | searchText.value = searchText.value.replace(/^\s*|\s*$/g, '') |
| | | let text = searchText.value.replace(/^\s*|\s*$/g, '') |
| | | dataList.forEach((item) => { |
| | | if (item.name.indexOf(text) > -1) { |
| | | let replaceStr = "<span style='background:#F5E12A'>" + text + '</span>' |
| | | let htmlStr = item.name.split(text).join(replaceStr) |
| | | item.name = '<p>' + htmlStr + '</p>' |
| | | resourceDataList.value.push(item) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | icon: moxinggongju |
| | | } |
| | | ]) |
| | | const baiduVisible = ref(false) |
| | | const wendaVisible = ref(false) |
| | | const cidianVisible = ref(false) |
| | | const functionVisible = ref(false) |
| | |
| | | const nameRef = ref() |
| | | const imgUrl = ref() |
| | | const confirmDialog = ref<Boolean>(false) |
| | | const nameData = ref({ name: '' }) |
| | | const screenshotVisble = ref<Boolean>(false) |
| | | const nameData = ref('') //截图名称 |
| | | const urlData = ref('') //截图base64 |
| | | const screenshotList = ref([]) |
| | | |
| | | //浮窗工具栏点击事件 |
| | |
| | | } |
| | | //确认回调 |
| | | const callback = (val: any) => { |
| | | ElMessageBox.confirm('确认要保存截图?', '提示', { |
| | | confirmButtonText: '确认', |
| | | cancelButtonText: '取消' |
| | | }) |
| | | .then(() => { |
| | | screenshotList.value.push({ |
| | | createDate: new Date(), |
| | | imgUrl: val.base64 |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'screenshot', |
| | | key: '2358', |
| | | value: JSON.stringify(screenshotList.value) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | getScreenshotList() |
| | | }) |
| | | }) |
| | | .catch(() => {}) |
| | | screenshotVisble.value = true |
| | | urlData.value = val.base64 |
| | | } |
| | | //取消回调 |
| | | const closeFn = (base64: any) => { |
| | | console.log(base64) |
| | | } |
| | | const addScreenshot = () => { |
| | | if (nameData.value) { |
| | | screenshotList.value.push({ |
| | | createDate: new Date(), |
| | | imgUrl: urlData.value, |
| | | name: nameData.value |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'screenshot', |
| | | key: '2358', |
| | | value: JSON.stringify(screenshotList.value) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | getScreenshotList() |
| | | screenshotVisble.value = false |
| | | }) |
| | | } else { |
| | | ElMessage.error('截图名称不能为空!') |
| | | } |
| | | } |
| | | const screenshotClose = () => { |
| | | screenshotVisble.value = false |
| | | } |
| | | |
| | | const getScreenshotList = () => { |
| | |
| | | const node = window.getSelection() |
| | | let html = node.anchorNode.parentNode.parentNode |
| | | dialogToolData.chapter = html.firstChild.innerHTML |
| | | console.log(dialogToolData.chapter) |
| | | if (txt) { |
| | | showToolBox.value = true |
| | | dialogToolData.top = e.y |
| | |
| | | { icon: biji2, activeIcon: biji1, name: '笔记' }, |
| | | { icon: biaozhu2, activeIcon: biaozhu3, name: '标注' }, |
| | | { icon: fuzhi, activeIcon: fuzhi1, name: '复制' }, |
| | | { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' } |
| | | // { icon: cidian2, activeIcon: cidian1, name: '词典' }, |
| | | { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' }, |
| | | { icon: cidian2, activeIcon: cidian1, name: '词典' }, |
| | | { icon: baidu, activeIcon: cidian1, name: '百科' } |
| | | // { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' } |
| | | // { icon: cidian2, activeIcon: cidian1, name: '翻译' } |
| | | ]) |
| | |
| | | dialogToolList[6].icon = cidian1 |
| | | break |
| | | case 7: |
| | | dialogToolList[7].icon = yuyinyuedu1 |
| | | dialogToolList[7].icon = baidu1 |
| | | break |
| | | } |
| | | } |
| | |
| | | dialogToolList[6].icon = cidian2 |
| | | break |
| | | case 7: |
| | | dialogToolList[7].icon = yuyinyuedu |
| | | dialogToolList[7].icon = baidu |
| | | break |
| | | } |
| | | } |
| | |
| | | case '词典': |
| | | cidianVisible.value = true |
| | | break |
| | | case '百科': |
| | | baiduVisible.value = true |
| | | break |
| | | } |
| | | } |
| | | |
| | |
| | | selectText: selectText.value, |
| | | color: colorActive.value, |
| | | chapter: dialogToolData.chapter, |
| | | color: item.key, |
| | | createDate: new Date() |
| | | }) |
| | | request({ |
| | |
| | | selectText: selectText.value, |
| | | color: colorActive.value, |
| | | chapter: dialogToolData.chapter, |
| | | color: item.key, |
| | | createDate: new Date() |
| | | }) |
| | | request({ |
| | |
| | | } |
| | | }).then((res) => { |
| | | if (res && res.length > 0 && res[0].value) { |
| | | scribeData.loading = false |
| | | dialogToolData.notesList = JSON.parse(res[0].value) |
| | | let list = JSON.parse(res[0].value) |
| | | let textDom1 = document.getElementById('container') |
| | |
| | | textDom1.innerHTML = rHtml1 |
| | | }) |
| | | } |
| | | scribeData.loading = false |
| | | } |
| | | |
| | | }) |
| | | } |
| | | //划线 |
| | |
| | | } |
| | | } |
| | | |
| | | const layoutBtn =() =>{ |
| | | const layoutBtn = () => { |
| | | localStorage.clear() |
| | | router.push('/') |
| | | console.log(888) |
| | | router.push('/login') |
| | | } |
| | | </script> |
| | | |
| | |
| | | .homeBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: #8cabeb; |
| | | background: #87ccff; |
| | | border-radius: 10px; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | p { |
| | | .logoTxt { |
| | | font-size: 24px; |
| | | color: #ffffff; |
| | | color: #333; |
| | | letter-spacing: 2px; |
| | | font-weight: bold; |
| | | } |
| | |
| | | flex-wrap: wrap; |
| | | justify-content: space-between; |
| | | .captureItem { |
| | | border: 1px solid #d8d8d8; |
| | | margin-bottom: 10px; |
| | | width: 46%; |
| | | .capture { |
| | | .imgBox { |
| | | border: 1px solid #d8d8d8; |
| | | width: 100%; |
| | | height: 80px; |
| | | margin-bottom: 5px; |
| | | } |
| | | // .capture { |
| | | // width: 100%; |
| | | // } |
| | | .captureName { |
| | | height: 20px; |
| | | line-height: 20px; |
| | | display: -webkit-box; |
| | | -webkit-box-orient: vertical; |
| | | -webkit-line-clamp: 1; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | color: #000; |
| | | } |
| | | } |
| | | } |
| | |
| | | position: absolute; |
| | | line-height: 22px; |
| | | top: 50%; |
| | | right: 65px; |
| | | right: 50px; |
| | | text-align: center; |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); |
| | | img { |
| | |
| | | } |
| | | } |
| | | .right { |
| | | right: 174px !important; |
| | | right: 184px !important; |
| | | border-radius: 0px 3px 3px 0px !important; |
| | | } |
| | | .classRoomBox { |
| | |
| | | height: 100%; |
| | | } |
| | | } |
| | | .myNoteDialogs { |
| | | width: 400px !important; |
| | | } |
| | | .myDialogs { |
| | | width: 628px; |
| | | |
| | | .myDialogs, |
| | | .myNoteDialogs, |
| | | .resourDialog { |
| | | padding: 0 !important; |
| | | border-radius: 10px !important; |
| | | overflow: hidden; |
| | | |
| | | .el-dialog__header { |
| | | padding: 15px; |
| | | margin-right: 0; |
| | | border-bottom: 1px solid #f4f4f4; |
| | | padding: 10px; |
| | | text-align: center; |
| | | background: #f4f5f9; |
| | | } |
| | | |
| | | .el-dialog__title { |
| | |
| | | } |
| | | |
| | | .el-dialog__headerbtn { |
| | | top: 6px; |
| | | right: 6px; |
| | | } |
| | | |
| | | .el-dialog__footer { |
| | | padding: 15px; |
| | | border-top: 1px solid #f4f4f4; |
| | | } |
| | | |
| | | .myDialogs-footer { |
| | | .el-button { |
| | | padding: 0 20px; |
| | | } |
| | | } |
| | | } |
| | | .myNoteDialogs { |
| | | padding: 0 !important; |
| | | border-radius: 10px !important; |
| | | overflow: hidden; |
| | | .el-dialog__header { |
| | | padding: 10px; |
| | | text-align: center; |
| | | background: #f4f5f9; |
| | | } |
| | | .el-dialog__headerbtn { |
| | | top: 0px !important; |
| | | right: 0px !important; |
| | | } |
| | | .el-dialog__body { |
| | | padding: 20px !important; |
| | | } |
| | | .el-dialog__footer { |
| | | padding: 10px 20px 20px !important; |
| | | text-align: right; |
| | | box-sizing: border-box; |
| | | } |
| | | } |
| | | .myDialogs { |
| | | width: 628px; |
| | | } |
| | | .myNoteDialogs { |
| | | width: 500px !important; |
| | | } |
| | | .noteColorSelectBox { |
| | | margin-top: 10px; |
| | |
| | | .imgUrlBox { |
| | | width: 100%; |
| | | text-align: center; |
| | | img { |
| | | width: 100%; |
| | | } |
| | | } |
| | | </style> |