style:样式

This commit is contained in:
Wxp 2025-08-18 22:09:42 +08:00
parent fbf783582d
commit 713b81c4e1
12 changed files with 146 additions and 155 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 58 KiB

View File

@ -79,9 +79,7 @@ body {
/* 响应式容器 */ /* 响应式容器 */
.container { .container {
width: 100%; width: 100%;
width: 1420px;
margin: 0 auto; margin: 0 auto;
/* padding: 0 20px; */
} }

View File

@ -29,7 +29,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue' import { ref, onMounted, watch, nextTick } from 'vue'
import Quill from 'quill' import Quill from 'quill'
import 'quill/dist/quill.snow.css' import 'quill/dist/quill.snow.css'
@ -52,7 +52,7 @@ const emit = defineEmits<{
const editorContainer = ref<HTMLElement>() const editorContainer = ref<HTMLElement>()
const quill = ref<Quill>() const quill = ref<Quill>()
const fontSize = ref(14) // const fontSize = ref(14)
const isBold = ref(false) const isBold = ref(false)
const isList = ref(false) const isList = ref(false)
const showColorPicker = ref(false) const showColorPicker = ref(false)
@ -111,27 +111,27 @@ const initQuill = () => {
}) })
} }
const changeFontSize = () => { // const changeFontSize = () => {
if (quill.value) { // if (quill.value) {
quill.value.format('size', fontSize.value) // quill.value.format('size', fontSize.value)
} // }
} // }
const toggleBold = () => { // const toggleBold = () => {
if (quill.value) { // if (quill.value) {
quill.value.format('bold', !isBold.value) // quill.value.format('bold', !isBold.value)
} // }
} // }
const toggleFontStyle = () => { // const toggleFontStyle = () => {
if (quill.value) { // if (quill.value) {
quill.value.format('italic', !quill.value.getFormat().italic) // quill.value.format('italic', !quill.value.getFormat().italic)
} // }
} // }
const toggleColorPicker = () => { // const toggleColorPicker = () => {
showColorPicker.value = !showColorPicker.value // showColorPicker.value = !showColorPicker.value
} // }
const selectColor = (color: string) => { const selectColor = (color: string) => {
if (quill.value) { if (quill.value) {
@ -140,16 +140,16 @@ const selectColor = (color: string) => {
showColorPicker.value = false showColorPicker.value = false
} }
const toggleList = () => { // const toggleList = () => {
if (quill.value) { // if (quill.value) {
const format = quill.value.getFormat() // const format = quill.value.getFormat()
if (format.list) { // if (format.list) {
quill.value.format('list', false) // quill.value.format('list', false)
} else { // } else {
quill.value.format('list', 'bullet') // quill.value.format('list', 'bullet')
} // }
} // }
} // }
const insertImage = () => { const insertImage = () => {
const input = document.createElement('input') const input = document.createElement('input')
@ -198,7 +198,7 @@ const addCustomFileButton = () => {
if (!quill.value) return if (!quill.value) return
// //
const toolbar = quill.value.getModule('toolbar') const toolbar = quill.value.getModule('toolbar') as any
const toolbarElement = toolbar.container const toolbarElement = toolbar.container
// //
@ -229,7 +229,7 @@ const addCustomFileButton = () => {
} }
} }
watch(() => props.modelValue, (newValue) => { watch(() => props.modelValue, (newValue: string) => {
if (quill.value && newValue !== quill.value.root.innerHTML) { if (quill.value && newValue !== quill.value.root.innerHTML) {
quill.value.root.innerHTML = newValue quill.value.root.innerHTML = newValue
} }

View File

@ -4346,8 +4346,7 @@ onActivated(() => {
background: #fff; background: #fff;
margin: 0 16px 16px 16px; margin: 0 16px 16px 16px;
height: 96px; height: 96px;
border-radius: 2px; border: 1.5px solid #D5D5D5;
/* border: 1px solid #979797; */
position: relative; position: relative;
} }
@ -4380,6 +4379,7 @@ onActivated(() => {
background: white; background: white;
resize: none; resize: none;
position: relative; position: relative;
border: none;
} }
.send-button { .send-button {

View File

@ -1657,6 +1657,10 @@ onMounted(() => {
font-weight: 500; font-weight: 500;
} }
.progress-text span {
color: #999;
}
.progress-text .progress-current { .progress-text .progress-current {
color: #000; color: #000;
} }

View File

@ -314,6 +314,99 @@
</div> </div>
</div> </div>
<div class="reviews-grid"> <div class="reviews-grid">
<div class="content-comments" style="--t:50s">
<div>
<span>
<img src="/images/activity/6.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络</span>
</span>
<span>
<img src="/images/activity/7.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/8.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模</span>
</span>
</div>
<div>
<span>
<img src="/images/activity/6.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络</span>
</span>
<span>
<img src="/images/activity/7.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/8.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模</span>
</span>
</div>
</div>
<div class="content-comments" style="--t:25s">
<div>
<span>
<img src="/images/activity/9.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/10.png" alt="" class="avatar-img">
<span>通过机器学习</span>
</span>
<span>
<img src="/images/activity/11.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模型和任务格式实</span>
</span>
</div>
<div>
<span>
<img src="/images/activity/9.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/10.png" alt="" class="avatar-img">
<span>通过机器学习</span>
</span>
<span>
<img src="/images/activity/11.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模型和任务格式实</span>
</span>
</div>
</div>
<div class="content-comments" style="--t:35s">
<div>
<span>
<img src="/images/activity/12.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络</span>
</span>
<span>
<img src="/images/activity/7.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/8.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模</span>
</span>
</div>
<div>
<span>
<img src="/images/activity/12.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络</span>
</span>
<span>
<img src="/images/activity/7.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/8.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模</span>
</span>
</div>
</div>
<div class="content-comments" style="--t:20s"> <div class="content-comments" style="--t:20s">
<div> <div>
<span> <span>
@ -345,100 +438,7 @@
</span> </span>
</div> </div>
</div> </div>
<div class="content-comments" style="--t:40s"> <div class="content-comments" style="--t:42s">
<div>
<span>
<img src="/images/activity/9.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/10.png" alt="" class="avatar-img">
<span>通过机器学习</span>
</span>
<span>
<img src="/images/activity/11.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模型和任务格式实</span>
</span>
</div>
<div>
<span>
<img src="/images/activity/9.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/10.png" alt="" class="avatar-img">
<span>通过机器学习</span>
</span>
<span>
<img src="/images/activity/11.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模型和任务格式实</span>
</span>
</div>
</div>
<div class="content-comments" style="--t:30s">
<div>
<span>
<img src="/images/activity/12.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络</span>
</span>
<span>
<img src="/images/activity/7.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/8.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模</span>
</span>
</div>
<div>
<span>
<img src="/images/activity/12.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络</span>
</span>
<span>
<img src="/images/activity/7.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/8.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模</span>
</span>
</div>
</div>
<div class="content-comments" style="--t:10s">
<div>
<span>
<img src="/images/activity/6.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络</span>
</span>
<span>
<img src="/images/activity/7.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/8.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模</span>
</span>
</div>
<div>
<span>
<img src="/images/activity/6.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络</span>
</span>
<span>
<img src="/images/activity/7.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学</span>
</span>
<span>
<img src="/images/activity/8.png" alt="" class="avatar-img">
<span>通过机器学习人工神经网络的结构化学习调整语言模</span>
</span>
</div>
</div>
<div class="content-comments" style="--t:20s">
<div> <div>
<span> <span>
<img src="/images/activity/6.png" alt="" class="avatar-img"> <img src="/images/activity/6.png" alt="" class="avatar-img">

View File

@ -2279,7 +2279,7 @@ button:active {
.details-container { .details-container {
width: 1420px; width: 1420px;
margin: 30px auto; margin: 30px auto;
background: rgba(246, 246, 246, 0.3); background: #F9F9F9;
border: 1.5px solid #fff; border: 1.5px solid #fff;
padding: 30px 20px; padding: 30px 20px;
} }

View File

@ -1491,9 +1491,9 @@ const executeSubmit = () => {
// } // }
// //
const goBack = () => { // const goBack = () => {
router.push(`/course/${courseId.value}`) // router.push(`/course/${courseId.value}`)
} // }
// //
const goHome = () => { const goHome = () => {
@ -1549,10 +1549,10 @@ const closePracticeResult = () => {
} }
// //
const reviewPractice = () => { // const reviewPractice = () => {
// // //
console.log('查看练习详情') // console.log('')
} // }
</script> </script>
<style scoped> <style scoped>

View File

@ -1077,7 +1077,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, onActivated, reactive } from 'vue' import { ref, computed, onMounted, onActivated, reactive } from 'vue'
import { useMessage, NUpload, NInput, NForm, NFormItem, NButton } from 'naive-ui' import { useMessage, NInput, NForm, NFormItem } from 'naive-ui'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import SafeAvatar from '@/components/common/SafeAvatar.vue' import SafeAvatar from '@/components/common/SafeAvatar.vue'
@ -2768,20 +2768,6 @@ const submitAssignment = () => {
closeUploadModal() closeUploadModal()
} }
//
const customRequest = ({ file, onFinish }: any) => {
//
setTimeout(() => {
uploadForm.files.push(file)
onFinish()
}, 1000)
}
//
const removeFile = (index: number) => {
uploadForm.files.splice(index, 1)
}
onMounted(() => { onMounted(() => {
// //
// //

View File

@ -466,7 +466,6 @@ const allImages = ref([
/* 全部视频区域 */ /* 全部视频区域 */
.all-videos { .all-videos {
margin-left: -130px;
width: 100vw; width: 100vw;
padding: 40px 0; padding: 40px 0;
background-color: #fff; background-color: #fff;

View File

@ -221,7 +221,7 @@ onMounted(() => {
/* 基础样式 */ /* 基础样式 */
.special-training-page { .special-training-page {
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #fff;
} }
.container { .container {
@ -254,6 +254,8 @@ onMounted(() => {
/* 筛选标签 */ /* 筛选标签 */
.filter-section { .filter-section {
width: 1420px;
margin: 0 auto;
background: white; background: white;
padding: 0; padding: 0;
} }
@ -291,6 +293,8 @@ onMounted(() => {
/* 训练内容区域 */ /* 训练内容区域 */
.training-content { .training-content {
width: 1420px;
margin: 0 auto;
padding: 40px 0; padding: 40px 0;
background-color: #fff; background-color: #fff;
} }