PPT全方位辅助系统——项目记录2

本文介绍了在前端开发中,针对项目需求实现的PPT生成器,包括导入本地大纲和AI自动生成大纲的功能,展示了相关页面设计与Vue组件代码
摘要由CSDN通过智能技术生成

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

由于我们的项目主要分为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>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值