首页/ 元素


页面固定操作
预览效果
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-element-fixed-option">
    <div class="item">
        <img class="icon" src="/static/images/icon-xcx.png" alt="">
        <div class="title">返回小程序</div>
    </div>
    <div class="item">
        <div class="icon"><i class="layui-icon layui-icon-login-wechat" style="font-size: 30px;color: rgb(7,193,96);"></i></div>
        <div class="title">返回微信</div>
    </div>
    <div class="item">
        <div class="icon"><i class="layui-icon layui-icon-website" style="font-size: 30px;color: #1e9fff;"></i></div>
        <div class="title">打开网站</div>
    </div>
</div>
.ul-element-fixed-option {
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 16px;
    z-index: 999;

    .item {
        text-align: center;
        margin-bottom: 16px;
        cursor: pointer;

        .icon {
            $iconSize: 30px;
            $pdddingSize: 6px;
            padding: $pdddingSize;
            box-shadow: 0 0 3px #999;
            width: calc(#{$iconSize} + #{$pdddingSize});
            height: calc(#{$iconSize} + #{$pdddingSize});
            display: inline-block;
            border-radius: 100%;
            background-color: #fff;
        }

        .title {
            margin-top: 6px;
            background-color: #fff;
            color: #666;
            padding: 3px;
            border-radius: 3px;
            font-size: 12px;
        }
    }
}
.ul-element-fixed-option {
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 16px;
  z-index: 999;
}
.ul-element-fixed-option .item {
  text-align: center;
  margin-bottom: 16px;
  cursor: pointer;
}
.ul-element-fixed-option .item .icon {
  padding: 6px;
  box-shadow: 0 0 3px #999;
  width: calc(30px + 6px);
  height: calc(30px + 6px);
  display: inline-block;
  border-radius: 100%;
  background-color: #fff;
}
.ul-element-fixed-option .item .title {
  margin-top: 6px;
  background-color: #fff;
  color: #666;
  padding: 3px;
  border-radius: 3px;
  font-size: 12px;
}

<view class="ul-element-fixed-option">
    <view class="item">
        <img class="icon" src="/static/images/icon-xcx.png" alt="">
        <view class="title">返回小程序</view>
    </view>
    <view class="item">
        <view class="icon"><i class="layui-icon layui-icon-login-wechat" style="font-size: 30px;color: rgb(7,193,96);"></i></view>
        <view class="title">返回微信</view>
    </view>
    <view class="item">
        <view class="icon"><i class="layui-icon layui-icon-website" style="font-size: 30px;color: #1e9fff;"></i></view>
        <view class="title">打开网站</view>
    </view>
</view>
站位加载
预览效果
加载中
加载中
加载中
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-section">
    <div class="ul-loading-pos">
        <div class="main">加载中</div>
    </div>
</div>
<div class="ul-section">
    <div class="ul-loading-pos lg">
        <div class="main">加载中</div>
    </div>
</div>
<div class="ul-section">
    <div class="ul-loading-pos screen">
        <div class="main">加载中</div>
    </div>
</div>
.ul-loading-pos {
    background-color: #eee;
    color: #999;
    display: inline-block;

    .main {
        padding: 15px;
    }

    &.lg {
        .main {
            padding: 25px 35px;
        }
    }

    &.screen {
        width: 100%;

        .main {
            padding: 60px 0;
            text-align: center;
        }
    }
}
.ul-loading-pos {
  background-color: #eee;
  color: #999;
  display: inline-block;
}
.ul-loading-pos .main {
  padding: 15px;
}
.ul-loading-pos.lg .main {
  padding: 25px 35px;
}
.ul-loading-pos.screen {
  width: 100%;
}
.ul-loading-pos.screen .main {
  padding: 60px 0;
  text-align: center;
}

<view class="ul-section">
    <view class="ul-loading-pos">
        <view class="main">加载中</view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-loading-pos lg">
        <view class="main">加载中</view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-loading-pos screen">
        <view class="main">加载中</view>
    </view>
</view>