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

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

本周我们主要完成了以下工作：

1）增添了登录界面的设计；

2）增添了主页面走马灯的设计；

1. 增添了页面的侧边栏设计，使页面跳转更为便利。

页面展示

登录页面

主页面

侧边栏

代码展示

登录页面

<template>

    <div

        v-if="loginModel === '注册'"

        class="container a-container"

        id="a-container"

    >

        <form class="form" id="a-form" method="" action="">

            <h2 class="form_title title">欢迎使用PPT全方位辅助系统</h2>

            <div class="form__icons">

                <img class="form__icon" src=" " />

                <img class="form__icon" src=" " />

                <img class="form__icon" src=" " />

            </div>

            <!-- <span class="form__span">or use email for registration</span> -->

            <input class="form__input" type="text" placeholder="用户名" />

            <input class="form__input" type="password" placeholder="密码" />

            <input class="form__input" type="text" placeholder="Token" />

            <div class="login-info">

                <a class="form__link" @click="forgetPassword">忘记密码了？</a>

                &nbsp;&nbsp;&nbsp;&nbsp;

                <a class="form__link" @click="switchModel('token')"

                    >获取Token教程</a

                >

                &nbsp;&nbsp;&nbsp;&nbsp;

                <a class="form__link" @click="switchModel('登陆')"

                    >使用账号登陆

                </a>

            </div>

            <button class="form__button button submit">

                注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册

            </button>

        </form>

    </div>

    <div

        v-else-if="loginModel === '登陆' || loginModel === 'token'"

        class="container b-container"

        id="b-container"

    >

        <form class="form" id="b-form" method="" action="">

            <h2 class="form_title title">欢迎登陆PPT全方位辅助系统</h2>

            <div class="form__icons">

                <img class="form__icon" src=" " />

                <img class="form__icon" src=" " />

                <img class="form__icon" src=" " />

            </div>

            <!-- <span class="form__span">或者使用Token登陆</span> -->

            <input

                v-if="loginModel === '登陆'"

                class="form__input"

                type="text"

                placeholder="用户名"

            />

            <input

                v-if="loginModel === '登陆'"

                class="form__input"

                type="password"

                placeholder="密码"

            />

            <input

                v-if="loginModel === 'token'"

                class="form__input"

                type="password"

                placeholder="Token"

            />

            <div class="login-info">

                <a class="form__link" @click="forgetPassword">忘记密码了？</a>

                &nbsp;&nbsp;&nbsp;&nbsp;

                <template v-if="loginModel === '登陆'">

                    <a class="form__link" @click="switchModel('token')"

                        >使用Token登陆

                    </a>

                    &nbsp;&nbsp;&nbsp;&nbsp;

                </template>

                <template v-if="loginModel === 'token'">

                    <a class="form__link" @click="switchModel('登陆')"

                        >使用账号登陆

                    </a>

                    &nbsp;&nbsp;&nbsp;&nbsp;

                </template>

                <a class="form__link" @click="switchModel('注册')"

                    >注册新账户</a

                >

            </div>

           

            <div>

           <router-link to="/Home" class="button">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陆</router-link>

         </div>

        </form>

    </div>

</template>

主页面

import ScaleBox from "vue3-scale-box";

   

    import { defineComponent } from 'vue';

    import image1 from '@/assets/cnm.png';

    import image2 from '@/assets/sbdhj.png';

    import image3 from '@/assets/xmsxwan.png';



export default defineComponent({

  name: 'Home',

  data() {

    return {

      carouselImages: [

        { src: image1, alt: 'Image 1', caption: '深夜理长' },

        { src: image2, alt: 'Image 2', caption: '世界如此之大' },

        { src: image3, alt: 'Image 3', caption: '我们只需要一个安安静静写字阅读的地方' },

      ],

    };

  },

});

  </script>  

侧边栏

<el-container class="layout-container">

      <!-- 左侧菜单 -->

      <el-aside width="200px" >

          <div class="el-aside__logo"></div>

          <!-- element-plus的菜单标签 -->

          <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"

              router>

              <el-menu-item index="/evaluatePPT">

                  <el-icon>

                      <Management />

                  </el-icon>

                  <span>评价PPT</span>

              </el-menu-item>

              <el-menu-item index="/guidePPT">

                  <el-icon>

                      <Promotion />

                  </el-icon>

                  <span>PPT辅导</span>

              </el-menu-item>

              <el-sub-menu >

                  <template #title>

                      <el-icon>

                          <UserFilled />

                      </el-icon>

                      <span>生成PPT</span>

                  </template>

                  <el-menu-item index="/creatPPT">

                      <el-icon>

                          <User />

                      </el-icon>

                      <span>PPT生成器</span>

                  </el-menu-item>

                  <el-menu-item index="/outline">

                      <el-icon>

                          <Crop />

                      </el-icon>

                      <span>生成大纲</span>

                  </el-menu-item>

                  <el-menu-item index="/template">

                      <el-icon>

                          <EditPen />

                      </el-icon>

                      <span>挑选PPT模板</span>

                  </el-menu-item>

              </el-sub-menu>

          </el-menu>

      </el-aside>

      <!-- 右侧主区域 -->

      <el-container>