修改样式：课程目标>课程标题

2 months ago · 3f9738733b
parent d948aaca3d
commit 3f9738733b
4 changed files with 154 additions and 118 deletions
--- a/teaching_integration_platform_admin_template/src/views/configurationPage/index.vue
+++ b/teaching_integration_platform_admin_template/src/views/configurationPage/index.vue
@ -1,96 +1,100 @@
 <template>
-    <div class="configuration-page">
-        <el-form :model="form" label-width="auto" style="max-width: 600px">
-            <el-form-item label="LOGO">
-                <my-update v-model="form.logo"></my-update>
-            </el-form-item>
-            <el-form-item label="项目名称">
-                <el-input v-model="form.name" />
-            </el-form-item>
-            <el-form-item label="门户头部宣传大图">
-                <my-update v-model="form.promotionalImages"></my-update>
-            </el-form-item>
-            <el-form-item label="门户首页">
-                <el-input v-model="form.home" />
-            </el-form-item>
-            <el-form-item label="后台登陆首页地址">
-                <el-input v-model="form.loginAddress" />
-            </el-form-item>
-            <el-form-item label="系统标题">
-                <el-input v-model="form.title" />
-            </el-form-item>
-            <el-form-item label="版权信息">
-                <el-input v-model="form.copyrightInformation" />
-            </el-form-item>
-            <el-form-item label="备案号">
-                <el-input v-model="form.recordNumber" />
-            </el-form-item>
-            <el-form-item label="备案号信息">
-                <el-input v-model="form.recordInformation" type="textarea" />
-            </el-form-item>
-            <el-form-item label="qq">
-                <el-input v-model="form.qqNumber" />
-            </el-form-item>
-            <el-form-item label="邮箱">
-                <el-input v-model="form.mailbox" />
-            </el-form-item>
-            <el-form-item label="电话">
-                <el-input v-model="form.phone" />
-            </el-form-item>
-            <el-form-item label="联系地址">
-                <el-input v-model="form.address" />
-            </el-form-item>
-            <el-form-item label="二维码">
-                <my-update v-model="form.qrCode"></my-update>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="onSubmit">保存</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="configuration-page">
+    <el-form :model="form" label-width="auto" style="max-width: 600px">
+      <el-form-item label="LOGO">
+        <my-update v-model="form.logo"></my-update>
+      </el-form-item>
+      <el-form-item label="项目名称">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="门户头部宣传大图">
+        <my-update v-model="form.promotionalImages"></my-update>
+      </el-form-item>
+      <el-form-item label="门户首页">
+        <el-input v-model="form.home" />
+      </el-form-item>
+      <el-form-item label="后台登陆首页地址">
+        <el-input v-model="form.loginAddress" />
+      </el-form-item>
+      <el-form-item label="系统标题">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="版权信息">
+        <el-input v-model="form.copyrightInformation" />
+      </el-form-item>
+      <el-form-item label="备案号">
+        <el-input v-model="form.recordNumber" />
+      </el-form-item>
+      <el-form-item label="备案号信息">
+        <el-input v-model="form.recordInformation" type="textarea" />
+      </el-form-item>
+      <el-form-item label="qq">
+        <el-input v-model="form.qqNumber" />
+      </el-form-item>
+      <el-form-item label="邮箱">
+        <el-input v-model="form.mailbox" />
+      </el-form-item>
+      <el-form-item label="电话">
+        <el-input v-model="form.phone" />
+      </el-form-item>
+      <el-form-item label="联系地址">
+        <el-input v-model="form.address" />
+      </el-form-item>
+      <el-form-item label="二维码">
+        <my-update v-model="form.qrCode"></my-update>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">保存</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>

 <script lang="ts" setup>
-import { getSysSettingApi, proxPutSysSettingApi, uploadApi } from '@/api/configuration';
+import {
+  getSysSettingApi,
+  proxPutSysSettingApi,
+  uploadApi,
+} from '@/api/configuration'
 import { ref, reactive } from 'vue'
-import MyUpdate from './MyUpdate.vue';
-import useUserStore from '@/store/modules/user';
+import MyUpdate from './MyUpdate.vue'
+import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()

 // do not use same name with ref
 const form = reactive({
-    address: '',
-    copyrightInformation: '',
-    id: userStore.data.id,
-    loginAddress: '',
-    logo: '',
-    name: '',
-    phone: '',
-    promotionalImages: '',
-    qqNumber: '',
-    qrCode: '',
-    recordNumber: '',
-    title: '',
-    mailbox: '',
-    home: '',
-    recordInformation: ''
+  address: '',
+  copyrightInformation: '',
+  id: userStore.data.id,
+  loginAddress: '',
+  logo: '',
+  name: '',
+  phone: '',
+  promotionalImages: '',
+  qqNumber: '',
+  qrCode: '',
+  recordNumber: '',
+  title: '',
+  mailbox: '',
+  home: '',
+  recordInformation: '',
 })

 const ran = ref(false)
 getSysSettingApi().then((res) => {
-    Object.assign(form, res.data)
-    ran.value = true
+  Object.assign(form, res.data)
+  ran.value = true
 })
 const onSubmit = async () => {
-    form.logo = await uploadApi(form.logo)
-    form.promotionalImages = await uploadApi(form.promotionalImages)
-    form.qrCode = await uploadApi(form.qrCode)
-    await proxPutSysSettingApi(form)
+  form.logo = await uploadApi(form.logo)
+  form.promotionalImages = await uploadApi(form.promotionalImages)
+  form.qrCode = await uploadApi(form.qrCode)
+  await proxPutSysSettingApi(form)
 }
 </script>
 <style lang="scss" scoped>
 .configuration-page {
-    width: 600px;
-    margin: auto;
+  width: 600px;
+  margin: auto;
 }
-</style>
+</style>
--- a/teaching_integration_platform_template/src/views/course/index.vue
+++ b/teaching_integration_platform_template/src/views/course/index.vue
@ -92,7 +92,9 @@
        </div>
        <div class="description">
          <div class="description-box">
-            {{ Route.query.name }}这个课程的简介：{{ learn.description }}
+            <!-- 课程简介： -->
+            <div class="title">{{ Route.query.name }}</div>
+            <div style="text-indent: 2em;">{{ learn.description }}</div>
            <!-- 《Vues 设计与实现》这本书的简介： 《Vues 设计与实现》是一本深入剖析
            Vues 框架核心原理的权威著作。
            本书首先会为读者搭建起一个坚实的知识基础，详细介绍 Vues
@ -568,12 +570,39 @@ getCourseObjectivesListEvent()
          overflow-y: auto;
          height: 260px;
          padding: 10px 20px;
-          text-indent: 2em;
+          // text-indent: 2em;
          /* 2em 约等于两个汉字的宽度 */
          font-size: 18px;
          line-height: 40px;
-
-          .description-box {}
+          position: relative;
+
+          .description-box {
+            .title {
+              border-radius: 16px;
+              border: 1px solid #e8e9fb;
+              box-shadow: 0 0 10px #e8e9fb;
+              text-align: center;
+              color: #12a3f5;
+              width: fit-content;
+              min-width: 80px;
+              padding: 0 10px;
+              position: relative;
+              left: 50%;
+              translate: -50%;
+              margin-bottom: 6px;
+              &:before {
+                content: "";
+                width: 300%;
+                height: 2px;
+                background: #e8e9fb;
+                position: absolute;
+                bottom: -6px;
+                left: 50%;
+                translate: -50%;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) ,#e8e9fb,rgba(255, 255, 255, 0));
+              }
+            }
+          }
        }

        .hours {
--- a/teaching_integration_platform_template/src/views/knowledge/index.vue
+++ b/teaching_integration_platform_template/src/views/knowledge/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="title">xxx知识点
+  <div class="title">{{ Route.query.title }}
    <div class="back" @click="router.go(-1)">返回</div>
  </div>
  <div class="container" v-if="loading">
@ -99,7 +99,7 @@ import VueOfficeDocx from '@vue-office/docx'
 const Route = useRoute()
 const router = useRouter()
 // const courseId: string = Route.query.id as string
-console.log(Route.query.id)
+// console.log(Route.query.id)
 const loading = ref(false)
 const activeName = ref<string>('1')

--- a/teaching_integration_platform_template/src/views/roadbedRecommendation/components/mountNode.vue
+++ b/teaching_integration_platform_template/src/views/roadbedRecommendation/components/mountNode.vue
@ -8,7 +8,7 @@ import { getCoursePath } from '@/api/course'
 import { useRouter } from 'vue-router'
 import { proxrequest } from '@/api/configuration';
 const Router = useRouter()
-const props = defineProps(['corseId']);
+const props = defineProps(['corseId','options']);
 const nodeList = ref({ nodes: [], edges: [] })
 watch(() => props.corseId, () => getCoursePathEvent());
 let prOpt: any;
@ -36,7 +36,39 @@ const getCoursePathEvent = async () => {
  console.log(nodeList.value)
  init()
 }
-
+var graph:any;
+onMounted(()=>{
+   graph = new G6.Graph({
+    container: 'mountNode',
+    width: window.innerWidth - 19,
+    height: 600,
+    layout: {
+      type: 'dagre',
+      rankdir: 'LR',
+      nodesep: 30,
+      ranksep: 100,
+    },
+    modes: {
+      default: ['drag-canvas'],
+    },
+    defaultNode: {
+      shape: 'round-rect',
+      labelCfg: {
+        style: {
+          fill: '#000000A6',
+          fontSize: 10,
+        },
+      },
+      style: {
+        stroke: '#72CC4A',
+        width: 150,
+      },
+    },
+    defaultEdge: {
+      shape: 'polyline',
+    },
+  })
+})
 const init = () => {
  var colorMap = {
    凭证开立: '#72CC4A',
@ -46,6 +78,8 @@ const init = () => {
    第二阶段: '#1A91FF',
    第三阶段: '#FFAA15',
  }
+  
+  // #region
  // var data = {
  //   nodes: [
  //     {
@ -186,6 +220,7 @@ const init = () => {
  //     },
  //   ],
  // }
+  // #endregion 

  G6.registerNode(
    'round-rect',
@ -357,46 +392,14 @@ const init = () => {
    },
  })

-  var graph = new G6.Graph({
-    container: 'mountNode',
-    width: window.innerWidth - 19,
-    height: 600,
-    layout: {
-      type: 'dagre',
-      rankdir: 'LR',
-      nodesep: 30,
-      ranksep: 100,
-    },
-    modes: {
-      default: ['drag-canvas'],
-    },
-    defaultNode: {
-      shape: 'round-rect',
-      labelCfg: {
-        style: {
-          fill: '#000000A6',
-          fontSize: 10,
-        },
-      },
-      style: {
-        stroke: '#72CC4A',
-        width: 150,
-      },
-    },
-    defaultEdge: {
-      shape: 'polyline',
-    },
-  })
-
  graph.data(nodeList.value)
  graph.render()
  graph.on('node:click', ev => {
-    console.log(ev.item._cfg.id);
+    console.log(ev, ev.item._cfg.id);
    Router.push({
      path: '/knowledge',
-      query: { id: ev.item._cfg.id }
+      query: { id: ev.item._cfg.id,title:ev.item._cfg.model.label }
    })
-
  });
  var edges = graph.getEdges()
  edges.forEach(function (edge: any) {