gengx

src/components/Monthly/Monthly.vue

@@ -109,7 +109,7 @@
                                     <span style="font-size:18px;font-weight:540;color: #676767">欢迎推荐和自荐项目！</span>
                                     <br/><br/>
                                 </div>
-                                <el-button type="info" @click="getProjectNum()" style="margin-top:37px">推荐项目</el-button>
+                                <el-button type="info" @click="backtoHome()" style="margin-top:37px">查看项目</el-button>
                                 <br/><br/>
                             </el-card>
                         </el-col>
@@ -121,6 +121,8 @@
         </div>
         <RightTools></RightTools>
 
+
+
     </div>
 
 </template>
@@ -128,11 +130,15 @@
 <script>
 import axios from 'axios'
 import RightTools from "@/components/Home/RightTools.vue";
+import Vue from "vue";
 export default {
     name: "MonthlyComponent",
     components: {RightTools},
     data(){
         return{
+            // 月刊标号海报：
+            MonPage:'3',
+            currentImg:'',
             // 项目总数
             ProjectNum:0,
             //期刊总数：
@@ -147,14 +153,25 @@ export default {
     },
     // 初始化渲染页面
     mounted(){
+        // 绘制最新月刊
+        this.addTextEvent();
+        // // 填充画布：
+        this.$nextTick(() => {
+            this.drawPage();
+        });
         this.getMonely();
         this.getProjectNum();
         this.getLabel();
     },
     methods: {
-        test(){
+        drawPage(){
+            var that = this;
+            var fac = document.getElementsByClassName("3");
+            fac.style.backgroundImage = that.currentImg;
+        },
+        test(index){
           var that = this;
-          console.log(that.selectlabelItem);
+          console.log(index);
         },
         goBack() {
             window.history.go(-1);
@@ -238,7 +255,45 @@ export default {
                     duration:700,
                 });
             }
-
+        },
+        openPublishProjects(){
+            if(this.$cookie.get('username')){
+                this.openPublishProject=true;
+            }else{
+                Vue.prototype.$notify.error({
+                    title: '错误',
+                    message: "请先登录!",
+                    offset: 50
+                });
+            }
+        },
+        backtoHome(){
+            let pathInfo = this.$router.resolve({
+                path: '/Home',
+                query:{
+                }
+            })
+            window.open(pathInfo.href, '_self');
+        },
+        addTextEvent() {
+            var _this = this
+            let canvas = document.createElement("canvas");
+            canvas.width = 600;
+            canvas.height = 400;
+            let myImage = new Image();
+            myImage.src = "../../assets/images/最新月刊.png";  // 需要添加文字的图片
+            myImage.crossOrigin = "Anonymous";
+            let context = canvas.getContext("2d");
+            myImage.onload = function () {
+                context.drawImage(myImage, 0, 0, canvas.width, canvas.height);
+                context.font = "20px Courier New";
+                context.fillStyle = 'red'
+                // context.textAlign = 'end' //文字右对齐
+                context.fillText("我是写入的文字", 250, 350);  // 文字的内容和位置
+                let base64 = canvas.toDataURL("image/png"); // "image/png" 这里注意一下
+                console.log(_this.currentImg);
+                _this.currentImg = base64
+            }
         }
     }
 }
@@ -260,17 +315,25 @@ export default {
 }
 
 .el-carousel__item{
+    //width:480px;
+}
+
+.el-carousel__item:nth-child(3n) {
+    background-size: cover;
+    width:500px;
+    background-image: url("../../assets/images/Post2.png");
+}
+
+.el-carousel__item:nth-child(3n+1) {
+    background-size: cover;
     width:450px;
-}
-
-.el-carousel__item:nth-child(2n) {
-    background-size: cover;
     background-image: url("../../assets/svg/WebsiteBanner.svg");
 }
 
-.el-carousel__item:nth-child(2n+1) {
+.el-carousel__item:nth-child(3n+2) {
     background-size: cover;
-    background-image: url("../../assets/svg/WebsiteBanner.svg");
+    width:450px;
+    background-image: url("../../assets/images/最新月刊.png");
 }
 .card_style{
     height:390px;

src/components/Monthly/MonthlyDetail.vue

@@ -271,7 +271,6 @@ export default {
                 that.MonType=[];
                 that.MonTypePro=[];
                 Object.keys(that.MonList).forEach(key=>{
-                    that.MonType.push(key);
                     that.MonTypePro.push(that.MonList[key]);
                 })
                 console.log(that.MonList);