项目部署

# 设定公共样式`globle-style.scss`

# 使用SCSS之前需要先下载预处理器sass

yarn add sass --save-dev

# 设定公共样式

// 扩大点击范围
.extend-click {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
}

.no-warp {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 定义主题色
$theme-color: #108b96;
$theme-color-shadow:rgba(90, 164, 174,.5);
$font-color-light:#f1f1f1;
$font-color-desc:#2E3030;
$font-color-desc-v2:#87c0ca;
$font-size-ss:10px;
$font-size-s:12px;
$font-size-m:14px;
$font-size-l:16px;
$font-size-ll:18px;
$border-color:#e4e4e4;
$background-color:#f2f3f4;
$background-color-shadow:rgba(0,0,0,.3);
$highlight-background-color:#ffff;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 2.如何设定router-link在选定到当前路由时的样式

stackoverflow answer: How to VueJS router-link active style (opens new window)

通过设置router-link :active-class即可设置如

<router-link to="/recommend" active-class="selected">
   <div class="tab-item"><span>推荐</span></div>
</router-link>

1
2
3

.tap {
    height:44px;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    background-color:$theme-color;

    a {
      flex:1;
      padding:2px 0;
      font-size: 14px;
      color:#e4e4e4;

      &.selected {
        span {
          padding:3px 0;
          font-weight: 700;
          color: #f1f1f1;
          border-bottom: 2px solid #f1f1f1;
        }
      }
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

示例图

# 基于Vue3的swiper组件轮播图相关

[ ] 轮播图下方操作点颜色更改问题
[x] 轮播图不显示问题
[x] 轮播图不自动轮播问题

# 参考文章：

编辑

上次更新: 2022/06/07, 05:17:41