移动端

/*去除默认样式*/
body, html{
  width:100%;
  height:100%;
}
html { font-size: 26.66vw; }

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, button, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, textarea, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; box-sizing: border-box; word-break:break-all; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
i, em, b, strong { font-style: normal; }
table{ border-collapse:collapse; }
li{list-style-type:none;}
body { font-size: 14px; line-height: 1; }
a { text-decoration: none; color: inherit; }
a:focus { outline: none; }
img { border: none; vertical-align:middle;}
input, button, select, textarea { outline: none; border: none; font-size: inherit; font-family:inherit; line-height:normal;}
input.disabled, textarea.disabled { background: #ccc;}
button.disabled{background: #ccc;color:#fff;}
button.disabled:hover{background: #ccc;color:#fff;cursor:default;}
textarea { resize: none; }

input::placeholder, textarea::placeholder { color: #747474;}

body {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  overflow: hidden;
}
#app {
  height: 100%;
  /*background-image: radial-gradient(circle,
  rgba(246, 239, 255, 0.70),
  rgba(143, 71, 234, 0.2),
  rgba(60, 127, 234, 0.2),
  rgba(240, 248, 255, 1));
  background-size: 200% 200%;
  background-position: 100% 0%;
  background-repeat: no-repeat;*/
  background-color: #F0F8FF;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    background: url('./assets/imgs/b_ball.png') no-repeat;
    background-size: cover;
    left: 20px;
    top: -20px;
    animation: move 6s infinite linear alternate;
  }

  &::after {
    content: "";
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    background: url('./assets/imgs/s_ball.png') no-repeat;
    background-size: cover;
    left: -350px;
    bottom: -150px;
    animation: move2 8s infinite linear alternate;
  }
}

@keyframes move {
  from {
    transform: translateX(0) scale(1)
  }
  to {
    transform: translateX(10px) scale(1.05)
  }
}

@keyframes move2 {
  from {
    transform: translateY(0) scale(1)
  }
  to {
    transform: translateY(-10px) scale(1.1)
  }
}

/* {
  animation: horizontal 11s infinite linear alternate,vertical 34s infinite  linear alternate;
  animation-composition: accumulate;
} */

/* vant变量 */
:root {
  --van-blue: var(--color-primary);

  --van-tabbar-height: 54px;

  --van-popup-close-icon-color: #999;
  --van-popup-close-icon-size: 20px;
  --van-popup-round-radius: 8px;

  --van-field-input-disabled-text-color: #969799;
}

/* vant面板 */
.van-action-sheet {
  max-height: 100%;
}
.van-action-sheet__header {
  border-bottom: 1px solid #F8F8F8;
}

/* 弹出框 */
.van-dialog__header {
  padding-left: 24px;
  padding-right: 24px;
}

/* vant上传 */
.g_uploader {
  width: 100%;
  height: 100%;
  & .van-uploader__wrapper {
    width: 100%;
    height: 100%;
  }
  & .van-uploader__input-wrapper {
    width: 100%;
    height: 100%;
  }
}

/* 页面 */
.g_page_box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.g_main_content {
  flex: 1;
  overflow: auto;
}

/* gpt格式需要 */
.g_markdown {
  font-size: 14px;
  line-height: 24px;
  color: #343434;
  width: 100%;
  & ul {
    list-style: initial;
    & ul{
      list-style-type: circle;
    }
  }
  & ol {
    list-style: initial;
    list-style-type: decimal;
  }
  & li {
    list-style-type: inherit;
    margin-left: 16px;
  }
  & img {
    max-width: 100%;
  }
  & label[editor_mark_text] {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  & label[data-type="2"] {
    font-weight: 600;
  }
  & .editor_up {
    color: #F05252;
  }
  & .editor_down {
    color: #07C160;
  }
  & .editor_bold {
    /* font-weight: bold; */
  }
  & .g_start {
    position: relative;

    & >i {
      position: absolute;
      width:42px;
      left:0;
      text-align: right;
      padding-right: 1px;
    }
    & div {
      text-indent: initial;
    }
    & >div {
      text-indent: 40px;
    }
  }
}

/* gpt格式需要 */
.g_start {
  position: relative;
  & >i {
    position: absolute;
    width:42px;
    left:0;
    text-align: right;
    padding-right: 1px;
  }
  & .retract {
    padding-left:42px;
  }
  & .retract-1{
    padding-left:16px;
  }
}
postcss配置
module.exports = {
  'plugins': [
    require('postcss-preset-env')({
      'stage': 0, // 实验性版本
      'importFrom': ['public/var.css'], // css变量
    }),
    require('postcss-pxtorem')({
      'rootValue': 100,
      'unitPrecision': 5,
      'propList': ['*'],
      'selectorBlackList': [/^html$/],
      'replace': true,
      'minPixelValue': 2,
    }),
  ],
}

`

`