1 Introduction
Designing end-of-course assignments, nowhere to start course design, too many total web page requirements? Don't have a suitable template? Database, java, python, vue, html jobs are complex and the workload is too large? Bi She has no clue and a series of questions. All the problems you want to solve will be solved in the WeChat public account "coding gas station"
2. Introduction of works
The vue responsive official website system is implemented using vue technology, which conforms to the knowledge system learned and is suitable for common homework and course design. If you need to obtain more works, please pay attention to the WeChat public account: coding gas station, get more information , you can leave a message in the WeChat background. Everyone is welcome to ask questions and exchange learning.
2.1. Introduction to works
The vue responsive official website system is implemented in a conventional way, which meets most of the requirements. There are relevant documents to explain the code configuration. If you need to learn knowledge points from the code, then this work will be your best choice
2.2. Secondary development tools for works
The code of this work is relatively simple, and it is basically completed using the knowledge points learned in the classroom. You only need to modify the relevant introduction text and some pictures, and you can change it into your own unique code. After downloading the web work, you can use any editing software (for example: DW , HBuilder, NotePAD, Vscode, Sublime, Webstorm (all editors can be used), java, python and other related operations can also complete related secondary development with the tools they often use.
2.3. Technical introduction of the work
Technical aspects of html webpage works: use CSS to make webpage background images, mouse over and selected navigation color change effects, underline and other related technologies to beautify the relevant interface, and some use javascript for verification. Use html5, css3 and other related technologies to complete the technical layout. In this work, common layouts, common floating layouts, and flex layouts will be used. At the same time, html5 and css3 are used in terms of operation, and basic knowledge such as div+css structure, form, hyperlink, floating, absolute positioning, relative positioning, font style, and reference video are used, and some js related knowledge is also used. For example, dom and bom are used to obtain relevant APIs of the browser, and css is used to beautify the style to make the interface more in line with web design
Technical aspects of vue works: websites developed using vue technology, involving common vue instructions, such as the use of v-for, v-if, v-show, v-html, etc., including the development of common functions such as watch and calculated attributes, and The use of components, the use of vue-related family buckets, and the use of v-router as routing are completely in line with common website development techniques. At the same time, html5, css3 and other related technologies will be used to complete the technical layout. In this work, common layouts, common floating layouts, and flex layouts will be used.
3. Demonstration of works
[coding gas station] vue programming --- realization of responsive official website
3.1, function page 1
pc home page
Mobile Homepage:
Relevant code:
<template>
<div id="app">
<div class="header">
<div class="container clearfix">
<el-row class="PC">
<el-col :span="3">
<div class="index-logo">
<router-link to="/">
<img src="../static/image/pc-logo.png"/>
</router-link>
</div>
</el-col>
<el-col :span="11">
<el-menu
:default-active="activeIndex"
:active-text-color="activeColor"
:router="true"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect">
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/solution">解决方案</el-menu-item>
<el-menu-item index="/product">产品中心</el-menu-item>
<el-menu-item index="/contactUs">联系我们</el-menu-item>
</el-menu>
</el-col>
<el-col :span="10">
<div style="line-height: 80px;" class="text-right">
<el-button round
@click="goLogin()"
class="btn-box">CMBI 登录</el-button>
<el-button round
@click="goLogin()"
class="btn-box">CPBI 登录</el-button>
<el-button round
type="primary"
@click="goLogin()">DataX 登录</el-button>
</div>
</el-col>
</el-row>
<el-row type="flex" class="row-bg Mobile" justify="space-between">
<el-col :span="8" class="m-box">
<div class="menu-btn" @click="mobileNav"><span></span><span></span><span></span></div>
</el-col>
<el-col :span="8" class="m-box m-index-logo" style="padding: 0">
<router-link to="/">
<img src="../static/image/logo.png">
</router-link>
</el-col>
<el-col :span="8" class="m-box text-right">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
登录<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><a @click="goLogin()">CMBI 登录</a></el-dropdown-item>
<el-dropdown-item><a @click="goLogin()">CPBI 登录</a></el-dropdown-item>
<el-dropdown-item><a @click="goLogin()">DataX 登录</a></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</div>
</div>
<div :class="['mobile-nav',[mobile_nav?'m-nav-show':'m-nav-hide']]">
<el-row>
<el-col :span="12" style="padding-left: 20px">
<img src="../static/image/logo2.png">
</el-col>
<el-col :span="12" class="text-right" style="padding-right: 20px">
<i class="el-icon-close" @click="mobileNav" style="color: #FFFFFF;font-size: 30px"></i>
</el-col>
</el-row>
<el-menu
:default-active="activeIndex"
:active-text-color="activeColor"
:router="true"
class="el-menu-vertical-demo"
background-color="transparent"
text-color="#fff"
style="margin: 20px 0"
>
<el-menu-item index="/" class="m-menu-icon icon1" @click="mobileNav">
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="/solution" class="m-menu-icon icon2" @click="mobileNav">
<span slot="title">解决方案</span>
</el-menu-item>
<el-menu-item index="/product" class="m-menu-icon icon3" @click="mobileNav">
<span slot="title">产品中心</span>
</el-menu-item>
<el-menu-item index="/contactUs" class="m-menu-icon icon4" @click="mobileNav">
<span slot="title">联系我们</span>
</el-menu-item>
</el-menu>
</div>
<div :class="['main-content',{'pdb0':activeIndex == '/contactUs'}]">
<router-view :class="[activeIndex == '/contactUs'?'':'content']"></router-view>
</div>
<Footer v-if="activeIndex != '/contactUs'"></Footer>
</div>
</template>
<script>
import Footer from './components/footer/Footer'
import ElCol from "element-ui/packages/col/src/col";
export default {
name: 'App',
data() {
return {
activeIndex: '',
activeColor:'#409EFF',
mobile_nav:false
};
},
components: {
ElCol, Footer
},
methods: {
handleSelect(val){
},
mobileNav(){
this.mobile_nav = !this.mobile_nav
},
getPath(){
this.activeIndex =this.$route.path
},
goLogin(url,opt_label){
window.open(url)
_hmt.push(['_trackEvent', 'login', 'click', opt_label])
}
},
created(){
this.activeIndex =this.$route.path
},
watch: {
'$route':'getPath'
},
}
</script>
<style lang="less">
@import "style/common.less";
</style>
Summarize
The above is the whole content of this project. If you need to communicate or get the code, please pay attention to the WeChat public account: coding gas station,