官网修改1

1

package.json

@@ -51,6 +51,7 @@
     "vue": "^3.2.26",
     "vue-cropper": "^1.0.3",
     "vue-router": "^4.0.12",
+    "vue3-lottie": "^2.2.4",
     "vuex": "^4.0.2"
   },
   "devDependencies": {

src/components/col-footer/index.module.less

@@ -58,7 +58,8 @@
             text-decoration: none;
             &:hover,
             &:after {
-              color: #cecece;
+              color: #fff;
+              // font-weight: bold;
             }
           }
         }

src/components/col-header/index.css

@@ -5,7 +5,7 @@
   background: rgba(0, 0, 0, 0.2);
 }
 .wall {
-  height: 70px;
+  height:60px;
 }
 .logoWrap {
   margin-left: 80px;
@@ -26,7 +26,7 @@
 .activeItem::after {
   position: absolute;
   content: "";
-  top: 42px;
+  top: 37px;
   left: 25%;
   width: 50%;
   height: 3px;
@@ -44,7 +44,7 @@
 .itemCenter {
   position: relative;
   margin-right: 74px;
-  line-height: 70px;
+  line-height: 60px;
 }
 
 .navWrap {
@@ -64,8 +64,8 @@
   width: 100%;
   top: 0px;
   z-index: 1200;
-  height: 70px;
-  line-height: 70px;
+  height: 60px;
+  line-height: 60px;
 }
 .isdark.headerSection {
   background-color: #383838!important;
@@ -82,5 +82,5 @@
 }
 
 .wall {
-  height: 70px;
+  height: 60px;
 }

src/components/col-header/index.tsx

@@ -17,8 +17,8 @@ export default defineComponent({
         { name: '首页', href: '/home', current: false },
         { name: '谱库', href: '/musicLibrary', current: false },
         { name: '视频课', href: '/videoDetailList', current: false },
-        { name: '云教练', href: '#', current: false },
-        { name: '社区', href: '#', current: false },
+        // { name: '云教练', href: '#', current: false },
+        // { name: '社区', href: '#', current: false },
         { name: '下载', href: '/downLoad', current: false }
       ],
       navPath: ['', '/musicLibrary', '', '', '/downLoad'],

src/components/col-header/modals/index.module.less

@@ -1,6 +1,6 @@
 .userInfoWrap {
-  min-height: 70px;
-  line-height: 70px;
+  min-height: 60px;
+  line-height: 60px;
   display: flex;
   flex-direction: row;
   align-items: center;

src/components/col-header/modals/loganInfo.tsx

@@ -74,7 +74,7 @@ export default defineComponent({
     }
     const logout = async () => {
       try{
-        const res = await request.get('/api-website/exit', {
+        const res = await request.get('/api-auth/exit', {
 
         })
         router.push({ path: '/' })
@@ -107,7 +107,7 @@ export default defineComponent({
       <>
         <ElDropdown
           onCommand={val => this.changeState(val)}
-          trigger="click"
+
           v-slots={{
             dropdown: () => (
               <>
@@ -122,7 +122,7 @@ export default defineComponent({
                         <p class={classes.dropdownItemsubTitle}>粉丝</p>
                       </div>
                       <div class={classes.dropdownItem}>
-                        <p class={classes.dropdownItemTitle}>134</p>
+                        <p class={classes.dropdownItemTitle}>{this.user.musicSheetNum || 0}</p>
                         <p class={classes.dropdownItemsubTitle}>乐谱</p>
                       </div>
                       {/* <div class={classes.dropdownItem}>

src/components/silder/index.module.less

@@ -1,6 +1,6 @@
 .silderWrap {
   position: fixed;
-  top: 50%;
+  top: 60%;
   right: 70px;
   z-index: 200;
   .silderList {

src/components/videoDetailItem/index.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
               <img src={icon} class={classes.itemHead} alt="" />
               <span class={classes.itemTitle}>{state.detail.username}</span>
               <div class={classes.line}></div>
-              <span class={classes.course}>{state.detail.lessonCount}课时</span>
+              <span class={classes.course}>共{state.detail.lessonCount}课时</span>
             </div>
             <div class={classes.itemBottomR}>
               <span class={classes.buy}>{state.detail.countStudent}人购买</span>

src/helpers/imageFunction.ts

@@ -36,8 +36,8 @@ export const addWatermark = (canvas, text) => {
 
   const water = document.createElement('canvas')
   // 小水印画布大小
-  water.width = 300
-  water.height = 100
+  water.width = 500
+  water.height = 300
 
   // 第一层
   const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
@@ -45,9 +45,9 @@ export const addWatermark = (canvas, text) => {
   // 小水印中文字偏转角度
   waterCtx.rotate((-25 * Math.PI) / 180)
   // waterCtx.translate(-30, -30)
-  waterCtx.font = '25pt Calibri' // 水印文字添加
+  waterCtx.font = '50pt Calibri' // 水印文字添加
   waterCtx.fillStyle = 'rgba(149,155,170,0.2)'
-  waterCtx.fillText('酷乐秀', 15,120)
+  waterCtx.fillText('酷乐秀', -10,180)
   const pat = ctx.createPattern(water, 'repeat')
   ctx.fillStyle = pat
   ctx.fillRect(0, 0, canvas.width, canvas.height)

src/views/downLoad/index.module.less

@@ -13,10 +13,10 @@
     .imgWrap {
       position: relative;
       .finch {
-        width: 155px;
-        height: 194px;
+        width: 200px;
+        height: 250px;
         position: absolute;
-        bottom: 0;
+        bottom: -32px;
         left: -126px;
       }
       .demo {

src/views/downLoad/index.tsx

@@ -5,15 +5,25 @@ import finch from './images/finch.png'
 import demo from './images/demo.png'
 import ios from './images/iosIcon.png'
 import andIcon from './images/andIcon.png'
+import { Vue3Lottie } from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
+import AstronautJSON  from '@/common/animate/kulexiuyunjiaolian.json'
 export default defineComponent({
   name: 'downLoad',
+  components:{
+    Vue3Lottie
+  },
+  setup(){
+
+  },
   render() {
     return (
       <div class={styles.bgWhite}>
         <div class={styles.container}>
           <div class={styles.imgWrap}>
             <img src={demo} class={styles.demo} alt="" />
-            <img src={finch} class={styles.finch} alt="" />
+            {/* <img src={finch} class={styles.finch} alt="" /> height="200" :width="200"  */}
+            <Vue3Lottie animationData={AstronautJSON} class={styles.finch}/>
           </div>
           <div class={styles.textWrap}>
             <h4>下载酷乐秀APP</h4>

src/views/main.ts

@@ -8,8 +8,10 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 // 引入模块后自动生效
 import '@vant/touch-emulator' // 处理移动端点击事件 vant 支持桌面端
 
-
-
+// 动画组件
+import Vue3Lottie from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
+// Vue.component('lottie',lottie)
 // import { state } from '@/state'
 
 const app = createApp(App)
@@ -21,6 +23,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 // const vconsole = new Vconsole()
 
 app.use(router)
-
+app.use(Vue3Lottie)
 
 app.mount('#app')

src/views/muiscDetial/index.tsx

@@ -118,25 +118,6 @@ export default defineComponent({
         `/accompany/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
       // state.accompanyUrl = `http://192.168.3.8:3000/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
 
-      // var iframe = document.getElementById('containerPrint') as any //获取id为svgframe的iframe对象
-      // if (iframe.attachEvent) {
-      //   iframe.attachEvent('onload', function () {
-      //   })
-      // } else {
-      //   iframe.onload = function () {
-      //     //这里获取svgDom
-      //     console.log(iframe.contentWindow)
-      //     var iframeSvg = document.getElementById('osmdSvgPage1')
-      //     console.log(iframeSvg)
-      //     //接下来就可以对svgDom进行操作，绑定元素点击事件，改变元素的属性等等
-      //     //给svg上id为‘VKnife1’的元素绑定点击事件
-
-      //   }
-      // }
-
-      // document.getElementById('containerPrint').onload = function () {
-      //   console.log(print)
-      // }
     }
     const setSvg = (val: any) => {
       console.log(val)
@@ -169,6 +150,7 @@ export default defineComponent({
 
       // 添加时间戳，防止浏览器缓存图片
       state.imgUrl = imgUrl
+      // console.log('printHander',imgUrl)
       // return
       link.href = imgUrl
       link.click()
@@ -349,6 +331,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
+          {/* <img src={state.imgUrl} alt="" /> */}
         </div>
       </>
     )