VUE前端项目样式布局事项

1.苹果手机微信长按图片识别二维码，路由需要使用hash模式，history模式不兼容。

2.区分理解单页面和多页面

3.<style lang="less" scoped>  css样式加scoped代表只在当前页面生效

.popdata {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:rgba(0,0,0,0.75);
  z-index: 9;

  &-content {
    width: 74.67vw;
    min-height: 30vw;
    position: relative;

    &-close {
      position: absolute;
      width: 5.87vw;
      height: 5.87vw;
      top: calc(-38px - 5.87vw);
      right: -8.27vw;
    }

    &-recommend {
      min-width:19.2vw;
      padding: 0 1.07vw;
      height: 22px;
      background:rgba(255,255,255,1);
      border-radius:4px;
      font-size:11px;
      font-weight:400;
      color:rgba(102,102,102,1);
      position: absolute;
      left: 0;
      top: -27px;
    }
  }
}

4.&符号代表上一层名称

5.flex 布局 https://www.runoob.com/w3cnote/flex-grammar.html

6.div中的第一个元素margin-top 无效，可以用div的padding-top代替

.video-pic {
  width:44.26vw;
  vertical-align: bottom;
  border-radius:5px;
}

7.图片文字对齐使用vertical-align: bottom

.stu-vip {
  width:89.33vw;
  height:141px;
  background:linear-gradient(90deg,rgba(255,227,174,1) 0%,rgba(254,205,129,1) 100%);
  border-radius:10px 10px 0px 0px;
  box-shadow:0px 0px 6px 3px rgba(0,0,0,0.02);
  margin: 10px 5.33vw 0 5.33vw;
  overflow:hidden;
}

8.渐变 background:linear-gradient(90deg,rgba(255,227,174,1) 0%,rgba(254,205,129,1) 100%);

 倒圆角 border-radius:10px 10px 0px 0px;

阴影 box-shadow:0px 0px 6px 3px rgba(0,0,0,0.02);

9.前端视窗单位 vw与 rem em


 

.link-item {
  height:51px;
  background:rgba(255,255,255,1);
  padding: 0 5.6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position:relative;
}
.link-item:after {
  content: '';
  position: absolute;
  left: 5.33vw;
  bottom: 0;
  height: 1px;
  width:89.33vw;
  background-color: rgba(238,238,238,1);
}

10.利用:after 添加边线

 

export default class Mine extends Vue {
    stuName = ''

    roomName = ''

    carType = ''

    stuPic = ''

    isvip = false

    stuinfo = ''

    theory = {
      backgroundImage: `url(${require('@/assets/images/mine/dyymeimgBg2x.png')})`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100% 100%',
    }

11.利用js代码设置背景图片，可以统一图片的地址变化。

<li style="width:29vw;" :class="[item.standard_type==1?'yxjg':'',item.standard_type==2?'lhjg':'',item.standard_type==3?'ybjg':'',item.standard_type==0?'wtgjg':'']">{{strChange(item.standard_type)}}</li>

12.vue根据条件启用不同样式

<div :id="'sheet-'+(citem.questionIndex)" class="sheet-content-item-name" :class="{
                  'sheet-content-item-right': citem.status == 2 || citem.statusHis == 2,
                  'sheet-content-item-wrong': citem.status == 1 || citem.statusHis == 1,
                  'sheet-content-item-active': questionsCurrentIndex==citem.questionIndex - 1 && citem.status == 0,
                  'sheet-content-item-activewrong': questionsCurrentIndex==citem.questionIndex - 1 && (citem.status == 1 || citem.statusHis == 1),
                  'sheet-content-item-activeright': questionsCurrentIndex==citem.questionIndex - 1 && (citem.status == 2 || citem.statusHis == 2)}"
                @click="jumpQuestion((citem.questionIndex -1))">
                  {{citem.questionIndex}}
                </div>

13.生成自增长ID，根据条件的false与true判断样式是否运行

@media (min-width: 600px) 
{ font-size: calc(112.5% + 4 * (100vw - 600px) / 400) }

14.@media (min-width: 600px) 媒体查询

 

15. if (typeof(exp) == "undefined") js判断不存在

 

16./*默认不换行*/

flex-wrap: nowrap;
/*换行，第一行在上方*/

flex-wrap: wrap;

/*换行，第一行在下方*/

flex-wrap: wrap-reverse;