代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> -->
<title>平面设计</title>
<link rel="stylesheet" href="./static/css/element-ui.css">
<link rel="stylesheet" href="./swiper/swiper.min.css" />
<script src="./static/js/basic.js"></script>
<script src="./static/js/element-ui.js"></script>
<script type="text/babel" src="./static/js/component.js" async></script>
<script type="text/javascript" src="./static/js/swiper-4.5.3.min.js"></script>
<script src="static/js/nav.js"></script>
</head>
<body>
<div v-cloak class="main majorAdd majorAdd-pingmian" id="app">
<layout>
<!-- banner -->
<div class="majorAdd-banner">
<img src="./static/majorImgs/13pingmian/banner.png" alt="">
</div>
<!-- 视觉爆炸的时代，平面设计充斥着我们的生活 -->
<div class="pingmian-main1">
<div class="box">
<major-title tit="视觉爆炸的时代，平面设计充斥着我们的生活" en="The age of visual explosion" top="96" bot="58"></major-title>
<el-row class="plane-visual-wrapper" :gutter="30">
<el-col :span="8" v-for="(item,index) in visualList" :key="index">
<div class="item" :style="{ borderColor: item.color }">
<div class="title" :style="{ backgroundColor: item.color }">{{item.title}}</div>
<div class="module">
<div class="block" :style="{ color: item.color }">◆</div>
<div class="content">{{item.content}}</div>
</div>
<div class="arrow" :style="{ borderColor: item.color, color: item.color }">→</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- 多维度打造全能设计师 -->
<div class="plane-designer-wrapper">
<major-title tit="多维度打造全能设计师" en="Create all-round designers in multiple dimensions" top="78" bot="96"></major-title>
<div class="box">
<el-row :gutter="10">
<el-col :span="4" v-for="(item,index) in designerList" :key="index">
<div class="item">
<div class="top">
<div class="label">{{item.label}}</div>
<div class="rank">{{item.rank}}</div>
</div>
<div class="title"><span>{{item.title}}</span></div>
<div class="list">
<div class="sub" v-for="(sub,idx) in item.list" :key="idx">
<div class="dot"></div>
<div class="name">{{sub}}</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- 用平面设计打开设计职场大门 -->
<div class="plane-career-wrapper">
<major-title tit="用平面设计打开设计职场大门" en="Open the design career door with graphic design" top="93" bot="68"></major-title>
<div class="module">
<div class="title">
<div class="line"></div>
<div class="name">POSTER HINGE</div>
</div>
<div class="left">
<div class="item" v-for="(item,index) in majorList" :key="index" :class="{ active: active === index }" @click="handleClick(index)">
{{item.name}}
</div>
</div>
<div class="right">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in majorList" :key="index">
<img :src="item.photo" alt="">
</div>
</div>
</div>
</div>
<div class="btns">
<div class="prev" @click="handleSlide(1)"></div>
<div class="next" @click="handleSlide(2)"></div>
</div>
</div>
</div>
<div class="plane-baom">
<major-baom></major-baom>
</div>
<!-- 众多院校专业 挑选适合自己的 -->
<major-yxzy></major-yxzy>
</layout>
</div>
<!-- 引入数据 -->
<script type="text/babel">
const time = new Date().getTime()
new Vue({
el: '#app',
components: {
'major-title': httpVueLoader('./components/majorAdd/title.vue?time'+time),
'major-yxzy': httpVueLoader('./components/majorAdd/yxzy.vue?time'+time),
'major-baom': httpVueLoader('./components/majorAdd/baom.vue?time'+time)
},
data: {
visualList: [
{ title: '衣', content: '服装的各种图形图案都是人们购买的理由个性的T恤印花与品牌LOGO设计是平面设计师的杰作', color: '#6082E5' },
{ title: '食', content: '美食也需要包装，诱人的味道如何从包装袋上展现，如何让食客看过广告就对食物垂涎欲滴，这都是平面设计师的基本功', color: '#FFB33E' },
{ title: '住', content: '室内的各种装饰图案，家居用品的各种创意设计，各种生活用品的创意图形，都离不开平面设计师的奇思妙想', color: '#26B7C4' },
{ title: '行', content: '公交车站灯箱广告牌、车体广告、地铁站灯箱广告牌，出租车上的杂志装点了我们的生活，它们都出自平面设计师之手', color: '#57C5AC' },
{ title: '娱乐', content: '电影、杂志、书籍、报刊、上网，无论是纸媒还是网媒，电视电影，平面设计的身影无处不在。', color: '#8960E5' },
{ title: '购物', content: '线上网购平台，各种BANNER广告与商品专题页广告;线下各种打折促销海报及购物手册设计都是平面设计师的日常工作内容。', color: '#ED4779' },
],
designerList: [
{ label: '商', rank: 'ONE', title: '商业视觉', list: ['商业视觉','形状造型','图形绘制','光影与透视','图层样式与蒙板功能','广告与banner','商业插画','H5运营设计'] },
{ label: '品', rank: 'TWO', title: '品牌平面', list: ['品牌平面','Al软件操作','构图与排版','色彩搭配','LOGO与字体','VI与物料','IP形象与吉祥物'] },
{ label: 'PS', rank: 'THREE', title: 'PS图像处理', list: ['PS图像处理PS软件操作','基础造型','抠图实用技法','画笔与文字工具','基础特效','常见图片修复','图像调色与混合模式','合成海报设计'] },
{ label: '摄', rank: 'FOUR', title: '拍摄与剪辑', list: ['拍摄与剪辑','器材与参数','布景与灯光','位与视角','拍摄与运镜','精修与剪辑'] },
{ label: '电', rank: 'FIVE', title: '电商全案', list: ['电商规范与页面布局','详情页设计','专题营销设计','钻展与直通车设计','电商全案项目1','电商实战项目2','电商装修','电商运营'] },
{ label: '三', rank: 'SIX', title: '三维设计', list: ['三维设计','曲面与多边形建模','材质与布光','渲染与后期','产品建模与渲染','场景建模与渲染','三维实战项目'] },
],
majorList: [
{ name: '海报/折页', photo: './static/majorImgs/13pingmian/graphic-p1.png' },
{ name: '标志VI设计', photo: './static/majorImgs/13pingmian/graphic-p2.png' },
{ name: '画册设计', photo: './static/majorImgs/13pingmian/graphic-p3.png' },
{ name: '界面设计', photo: './static/majorImgs/13pingmian/graphic-p4.png' },
{ name: '字体设计', photo: './static/majorImgs/13pingmian/graphic-p5.png' },
{ name: '网页设计', photo: './static/majorImgs/13pingmian/graphic-p6.png' },
{ name: '产品精修', photo: './static/majorImgs/13pingmian/graphic-p7.png' },
{ name: '交互动效', photo: './static/majorImgs/13pingmian/graphic-p8.png' },
{ name: 'C4D作品', photo: './static/majorImgs/13pingmian/graphic-p9.png' },
],
active: 0,
mySwiper: null,
},
methods: {
handleClick(active) {
if (this.active !== active) {
this.active = active
this.mySwiper.slideTo(active)
}
},
handleSlide(type) {
if (type === 1) {
this.mySwiper.slidePrev()
} else {
this.mySwiper.slideNext()
}
}
},
mounted() {
const _this = this
this.mySwiper = new Swiper('.swiper-container', {
on: {
slideChange: function() {
_this.active = this.activeIndex
}
}
})
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
