vue css/stylus布局

vue html/css/stylus布局

1.router.js配置

2.在对应配置目录下创建相应组件

在@page/create-test目录下创建index.vue组件

index.vue
html

<template><div class="createTest"><!--        左侧内容布局--><div class="content"><div class="step1" v-loading="loading"><div class="group" v-for="group in groups" :key="group.catalogue.name"><div class="group-title">{{ group.catalogue.name }}</div><div class="types"><div class="type" :class="{[type.name]:true, active:type.name===typeName}"v-for="type in group.types" :key="type.name" @click="nextStep(type, group)"><!--                        <img class="type-img" src="/imgs/Profit Model.svg" alt="type-img">--><img class="type-img" :src="`/imgs/${type.name}.svg`" alt="type-img"><div class="type-name">{{ type.name }}</div><div class="type-description">{{ type.description }}</div></div></div></div></div></div><!--        右侧布局--><div class="right-box"><div class="title">This is a title!!!</div><img class="createIdeaBgImg" src="@/assets/submit_idea.svg" alt="submit_idea"><div class="step"><div class="step-item-1 flex cursor" :class="{ active: active === 1}" @click="active = 1"><div class="index">1</div><div class="ideaTypeName">Please Select idea type</div></div><div class="dashed" :class="{ active:active === 2}"></div><div class="step-item-2 flex" :class="{ active: active === 2}"><div class="index">2</div><div class="ideaTypeName">Finish!!!</div></div></div></div><!--        <div v-show="active===2">{{ typeName}}</div>--><createIdeaPop class="createIdeaPop" v-show="showPop" :typeName="typeName" :groupName="groupName":groups="groups" @hideModal="hideModal" @submit="submit"><!--            <p style="border: #409eff">名称:<input type="text" ></p>--><!--            <p>类型:<input type="text" ></p>--></createIdeaPop></div>
</template>

css语法是stylus

<style scoped lang="stylus">.createTestdisplay flex;justify-content space-between;/*align-items center*/align-items flex-start.right-box/*margin-right 30px*/margin-top 37pxwidth 394pxbackground var(--bg-color)padding 40px 40px 76pxborder-radius 17pxtext-align center.titlefont-size 24pxfont-weight boldcolor pinkmargin 0 0 30px.createIdeaBgImgwidth 264pxmargin-bottom 45px.stepmargin 0 autodisplay inline-block.indexwidth 24pxheight 24pxborder-radius 50%background #EAEAFFtext-align centerline-height 24pxcolor #9595A0font-size var(--font-size-small)margin-right 12px.dashedheight 54pxborder-left 1px dashed #C8C8CFmargin 3px 0 3px 11px&.activeborder-left 1px dashed #FD5373.step-item-1.indexbackground pink/*background #FFDDE3*/color #ffffff.ideaTypeNamefont-size var(--font-size)color var(--font-color-shallow).active.indexbackground #FD5373color #fffffffont-weight bold.ideaTypeNamefont-size var(--font-size-max)color var(--font-color)font-weight bold.contentflex-basis 1height calc(100vh - 130px)/*.group*//*    display flex*/margin-right 5px.group-titlefont-size var(--font-size-max)font-weight bold.typesdisplay flexflex-flow row wrappadding-bottom 40px.typewidth 198pxheight 198pxtext-align centerbackground var(--bg-color)border-radius 17pxpadding 30pxbox-sizing border-boxmargin-top 20pxcursor pointer&.Model.active&.Model:hoverbackground rgba(255, 201, 91, 1)&.Network.active&.Network:hoverbackground rgba(96, 99, 255, .7)&.Structure.active&.Structure:hoverbackground rgba(180, 91, 255, .7)&.Process.active&.Process:hoverbackground rgba(115, 234, 143, .7)&.performance.active&.performance:hoverbackground rgba(255, 132, 33, .7)&.system.active&.system:hoverbackground rgba(219, 77, 255, .1)&.Service.active&.Service:hoverbackground rgba(255, 144, 144, .1)&.Channel.active&.Channel:hoverbackground rgba(101, 207, 255, .1)&.Brand.active&.Brand:hoverbackground rgba(241, 206, 157, .1)&.engagement.active&.engagement:hoverbackground rgba(255, 157, 241, .1)&:not(:nth-child(4n))margin-right 20px.type-imgwidth 53pxheight 53pxdisplay blockmargin 0 auto.type-namefont-size var(--font-size-large)font-weight boldmargin 16px 0 8px.type-descriptionfont-size var(--font-size-min)line-height 20pxcolor var(--font-color-shallow)</style>

<script>import createIdeaPop from './createIdeaPop'import {ideas_types} from "@/api/home";export default {name: "create-test",components: {createIdeaPop,},data() {return {active: 1,loading: false,typeName: '',groupName: '',showPop: false,createIdeaPopTitle: '',testName: 'hello idea',groups: [],}},created() {ideas_types(true).then(res => {this.groups = resconsole.log('res', res)}).catch(err => {console.log(err)})// 监听刷新操作提示用户window.onbeforeunload = () => {if (this.$route.path === '/create-test' && this.active === 2) {return '您编辑的信息尚未保存，您确定要离开吗？' //这里内容不会显示在提示框，为了增加语义化。}}},methods: {nextStep(type, group) {this.active = 2this.typeName = type.namethis.groupName = group.catalogue.namethis.showPop = trueconsole.log(group, type)// this.$router.push('/create-idea')},hideModal() {this.showPop = falsethis.active = 1console.log('showPop', this.showPop)},submit() {this.showPop = trueconsole.log('showPop', this.showPop)}}}
</script>

布局效果图

其中的静态资源等文件未上传加载,此文仅供参考！

vue css/stylus布局相关推荐

vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
vue怎么vw布局好用_vue 实现 rem 布局的或者 vw 布局的方法
vue 实现 rem 布局的或者 vw 布局的方法一.实现 rem 布局移动端 name="viewport" content="width=device-widt ...
vue怎么vw布局好用_Vue 实现 rem 布局或vw 布局的方法_晴枙_前端开发者
一.实现 rem 布局移动端 name="viewport" content="width=device-width, initial-scale=1, maximum ...
Vue的Flex布局
Vue的Flex布局背景 Flex来源什么是Flex布局基本概念容器的属性 flex-direction属性 flex-wrap属性 flex-flow justify-content属性 a ...
vue手机端布局纵向布局_Vue中的黄金布局集成
vue手机端布局纵向布局金色的布局 (vue-golden-layout) Integration of the golden-layout to Vue. 将黄金布局整合到Vue. 安装 (Ins ...
CSS 主流布局进阶
CSS 主流布局进阶前言一.CSS 还原 UI 设计 1.Photoshop 还原 UI 设计 (1)PhotoShop 下载安装 (2)添加辅助线 (3)尺寸.文字.颜色等信息的获取 (4)切图 ...
Vue 使用 rem布局
Vue 使用 rem布局 1.rem布局需要安装两个插件 npm i lib-flexible -S npm i postcss-pxtorem@5.1.1 -D 最新版本postcss-pxtore ...
【小5聊】使用js+css+div布局方式画一棵圣诞树，带闪烁霓虹灯效果
虽然jQuery时代已经逐渐退出历史舞台,在拥抱vue的同时,也还是可以用jQuery锻炼下编程思维,毕竟比较灵活. 1.适合基础入门的前端小伙伴 2.适合使用jQuery锻炼实现前端效果小伙伴 3. ...
css 网格布局_我从CSS网格布局中学到的东西
css 网格布局 by Jennifer Wjertzoch 珍妮弗·维佐奇我从CSS网格布局中学到的东西 (Things I've learned about CSS grid layout) W ...

vue css/stylus布局

vue html/css/stylus布局

1.router.js配置

2.在对应配置目录下创建相应组件

vue css/stylus布局相关推荐

最新文章

热门文章