【山东大学项目实训】第二周进度汇报

本周我们继续学习前端的相关内容，并根据之前小组讨论后设计的项目前端页面进行前端页面和功能的初步实现。

由于我们的项目主要分为PPT生成和PPT评价修改两个大部分，因此，我们本周主要进行了PPT生成功能对应页面的初步实现。此功能又包括两种方式，导入本地大纲和在对话框中输入PPT主题和关键字AI生成大纲。

对于导入本地大纲功能，主要实现了可以从本地上传文件，其页面效果图如下：

其中，点击选择文件，可以从本地选择自己想要上传的文件 

对于AI生成大纲功能，其页面效果图如下：

代码如下：

<template> 

    <div class="web-page"> 

      <div class="header" style="font-size: 40px;"> 

        <h1>PPT生成器</h1> 

      </div> 

      <div class="content"> 

        <div class="ask" style="font-size: 30px;">

          <p>请问您想通过什么方式生成PPT呢？</p> 

        </div>

        <div class="form-container"> 

 

          <div class="radio-group" style="font-size: 30px;"> 

            <label> 

              <input type="radio" name="generate-method" v-model="generateMethod" value="auto"> 

              导入本地大纲

            </label> 

            <label> 

              <input type="radio" name="generate-method" v-model="generateMethod" value="manual"> 

              AI生成大纲 

            </label> 

          </div>

        <div> 

          <input type="file" v-if="generateMethod === 'auto'" @change="handleFileUpload" /> 

        </div> 



          <div v-if="generateMethod === 'manual'" class="input-group" style="font-size: 30px;"> 

            <label for="ppt-topic">请在下方输入您想要的PPT主题和关键字：</label> 

            <input type="text" id="ppt-topic" v-model="pptTopic" placeholder="输入框" style="width: 300px; height: 40px;"> 

          </div> 

          <div class="creat">

            <router-link to="/outline" class="button">生成大纲</router-link>

            <router-view></router-view>

          </div>



          <div class="back">

            <router-link to="/" class="button">返回</router-link>

            <router-view></router-view>

          </div>

         

        </div> 

      </div> 

    </div> 

  </template> 

   

  <script> 

 

       window.location.href = '/outline.vue';

       window.location.href = '/Home.vue';

 

 

  // 获取按钮元素

 

  export default { 

    data() { 

      return { 

        generateMethod: 'auto', 

        pptTopic: '', 

        showUpload: false, // 控制上传组件的显示与隐藏 

        selectedFile: null, // 存储选中的文件 

      }; 

    }, 

    methods: { 

      handleFileUpload(event) { 

        this.selectedFile = event.target.files[0]; 

      }, 

     

     

    }, 

 

 

 

     

 

  }; 

 

  

 

 

  </script> 

   

  <style scoped> 

  .web-page { 

    display: flex; 

    flex-direction: column; 

    align-items: stretch; 

    justify-content: flex-start; 

    font-family: Arial, sans-serif; 

    margin: 0 auto; 

    padding: 20px; 

    max-width: 600px; 

  } 

   

  .header { 

    display: flex; 

    justify-content: center; 

    margin-bottom: 20px;

    position: absolute; /* 使用绝对定位 */ 

    top: 50px; /* 距离顶部的位置 */ 

    left: 100px; /* 距离左侧的位置 */ 

 

  } 

   

  .header h1 { 

    margin: 0; 

  } 

   

  .content { 

    display: flex; 

    flex-direction: column; 

  } 

 

  .ask{

    display: flex; 

    flex-direction: column;

    position: absolute; /* 使用绝对定位 */ 

    top: 160px; /* 距离顶部的位置 */ 

    left: 150px; /* 距离左侧的位置 */ 

  }



  .creat{

    display: flex; 

    flex-direction: column;

    position: absolute; /* 使用绝对定位 */ 

    top: 600px; /* 距离顶部的位置 */ 

    left: 600px; /* 距离左侧的位置 */ 

  }

  .form-container { 

    display: flex; 

    flex-direction: column;

 

  } 



  .back{

    display: flex; 

    flex-direction: column;

    position: absolute; /* 使用绝对定位 */ 

    top: 50px; /* 距离顶部的位置 */ 

    left: 50px; /* 距离左侧的位置 */ 

  }



   

  .radio-group { 

    display: flex; 

    flex-direction: column; 

    margin-bottom: 10px; 

    position: absolute; /* 使用绝对定位 */ 

    top: 350px; /* 距离顶部的位置 */ 

    left: 600px; /* 距离左侧的位置 */ 

  } 

   

  .radio-group label { 

    margin-bottom: 5px; 

  } 

   

  .input-group { 

    margin-top: 10px;

    position: absolute; /* 使用绝对定位 */ 

    top: 450px; /* 距离顶部的位置 */ 

    left: 600px; /* 距离左侧的位置 */  

   

  } 

   

  .input-group label { 

    display: block; 

    margin-bottom: 5px; 

  } 

   

  .input-group input { 

    width: 100%; 

    padding: 5px; 

  } 

   



 

  button { 

    margin-top: 15px; 

    padding: 10px 20px; 

    border: none; 

    border-radius: 4px; 

    position: absolute; /* 使用绝对定位 */ 

    top: 610px; /* 距离顶部的位置 */ 

    left: 600px; /* 距离左侧的位置 */ 

    background-color: #4CAF50; 

    color: white; 

    cursor: pointer; 

  } 

   

  button:hover { 

    background-color: #45a049; 

  } 

  </style>