在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
<view class="container"> <view class="page-body"> <view class="page-section page-section-spacing swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px"> <block wx:for="{{background}}" wx:key="*this"> <swiper-item> <view class="swiper-item {{item}}"></view> </swiper-item> </block> </swiper> </view> <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;"> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_switch"> <view class="weui-cell__bd">指示点</view> <view class="weui-cell__ft"> <switch checked="{{indicatorDots}}" bindchange="changeProperty" data-property-name="indicatorDots" /> </view> </view> <view class="weui-cell weui-cell_switch"> <view class="weui-cell__bd">自动播放</view> <view class="weui-cell__ft"> <switch checked="{{autoplay}}" bindchange="changeProperty" data-property-name="autoplay" /> </view> </view> <view class="weui-cell weui-cell_switch"> <view class="weui-cell__bd">衔接滑动</view> <view class="weui-cell__ft"> <switch checked="{{circular}}" bindchange="changeProperty" data-property-name="circular" /> </view> </view> <view class="weui-cell weui-cell_switch"> <view class="weui-cell__bd">竖向</view> <view class="weui-cell__ft"> <switch checked="{{vertical}}" bindchange="changeProperty" data-property-name="vertical" /> </view> </view> </view> </view> <view class="page-section page-section-spacing"> <view class="page-section-title"> <text>幻灯片切换时长(ms)</text> <text class="info">{{duration}}</text> </view> <slider value="{{duration}}" min="500" max="2000" bindchange="changeProperty" data-property-name="duration" /> <view class="page-section-title"> <text>自动播放间隔时长(ms)</text> <text class="info">{{interval}}</text> </view> <slider value="{{interval}}" min="2000" max="10000" bindchange="changeProperty" data-property-name="interval" /> <view class="page-section-title"> <text>前边距(px)</text> <text class="info">{{previousMargin}}</text> </view> <slider value="{{previousMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="previousMargin" /> <view class="page-section-title"> <text>后边距(px)</text> <text class="info">{{nextMargin}}</text> </view> <slider value="{{nextMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="nextMargin" /> </view> </view> </view> @import "./weui.wxss"; page { background-color: #F8F8F8; height: 100%; font-size: 32rpx; line-height: 1.6; } .page-body{ padding-top: 60rpx; } .page-section{ width: 100%; margin-bottom: 60rpx; } .page-section_center{ display: flex; flex-direction: column; align-items: center; } .page-section:last-child{ margin-bottom: 0; } .page-section-gap{ box-sizing: border-box; padding: 0 30rpx; } .page-section-spacing{ box-sizing: border-box; padding: 0 80rpx; } .page-section-title{ font-size: 28rpx; color: #999999; margin-bottom: 10rpx; padding-left: 30rpx; padding-right: 30rpx; } .page-section-gap .page-section-title{ padding-left: 0; padding-right: 0; } .demo-text-1{ position: relative; align-items: center; justify-content: center; background-color: #1AAD19; color: #FFFFFF; font-size: 36rpx; } .demo-text-1:before{ content: 'A'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .demo-text-2{ position: relative; align-items: center; justify-content: center; background-color: #2782D7; color: #FFFFFF; font-size: 36rpx; } .demo-text-2:before{ content: 'B'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .demo-text-3{ position: relative; align-items: center; justify-content: center; background-color: #F1F1F1; color: #353535; font-size: 36rpx; } .demo-text-3:before{ content: 'C'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } button{ margin-bottom: 30rpx; } button:last-child{ margin-bottom: 0; } .page-section-title{ padding: 0; } .swiper-item{ display: block; height: 150px; } .page-section-title{ margin-top: 60rpx; position: relative; } .info{ position: absolute; right: 0; color: #353535; font-size: 30rpx; } .page-foot{ margin-top: 50rpx; } /*! * weui.js v1.1.0 (https://github.com/weui/weui-wxss) * Copyright 2016, wechat ui team * MIT license */ page { line-height: 1.6; font-family: -apple-system-font, "Helvetica Neue", sans-serif; } icon { vertical-align: middle; } .weui-cells { position: relative; margin-top: 1.17647059em; background-color: #FFFFFF; line-height: 1.41176471; font-size: 17px; } .weui-cells:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cells:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cells__title { margin-top: .77em; margin-bottom: .3em; padding-left: 15px; padding-right: 15px; color: #999999; font-size: 14px; } .weui-cells_after-title { margin-top: 0; } .weui-cells__tips { margin-top: .3em; color: #999999; padding-left: 15px; padding-right: 15px; font-size: 14px; } .weui-cell { padding: 10px 15px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-cell:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; left: 15px; } .weui-cell:first-child:before { display: none; } .weui-cell_active { background-color: #ECECEC; } .weui-cell_primary { -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .weui-cell__bd { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .weui-cell__ft { text-align: right; color: #999999; } .weui-cell_access { color: inherit; } .weui-cell__ft_in-access { padding-right: 13px; position: relative; } .weui-cell__ft_in-access:after { content: " "; display: inline-block; height: 6px; width: 6px; border-width: 2px 2px 0 0; border-color: #C8C8CD; border-style: solid; -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); position: relative; top: -2px; position: absolute; top: 50%; margin-top: -4px; right: 2px; } .weui-cell_link { color: #586C94; font-size: 14px; } .weui-cell_link:active { background-color: #ECECEC; } .weui-cell_link:first-child:before { display: block; } .weui-icon-radio { margin-left: 3.2px; margin-right: 3.2px; } .weui-icon-checkbox_circle, .weui-icon-checkbox_success { margin-left: 4.6px; margin-right: 4.6px; } .weui-check__label:active { background-color: #ECECEC; } .weui-check { position: absolute; left: -9999px; } .weui-check__hd_in-checkbox { padding-right: 0.35em; } .weui-cell__ft_in-radio { padding-left: 0.35em; } .weui-cell_input { padding-top: 0; padding-bottom: 0; } .weui-label { width: 105px; word-wrap: break-word; word-break: break-all; } .weui-input { height: 2.58823529em; min-height: 2.58823529em; line-height: 2.58823529em; } .weui-toptips { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); top: 0; left: 0; right: 0; padding: 5px; font-size: 14px; text-align: center; color: #FFFFFF; z-index: 5000; word-wrap: break-word; word-break: break-all; } .weui-toptips_warn { background-color: #E64340; } .weui-textarea { display: block; width: 100%; } .weui-textarea-counter { color: #B2B2B2; text-align: right; } .weui-textarea-counter_warn { color: #E64340; } .weui-cell_warn { color: #E64340; } .weui-form-preview { position: relative; background-color: #FFFFFF; } .weui-form-preview:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-form-preview:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-form-preview__value { font-size: 14px; } .weui-form-preview__value_in-hd { font-size: 26px; } .weui-form-preview__hd { position: relative; padding: 10px 15px; text-align: right; line-height: 2.5em; } .weui-form-preview__hd:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1rpx solid #D9D9D9; color: #D9D9D9; left: 15px; } .weui-form-preview__bd { padding: 10px 15px; font-size: .9em; text-align: right; color: #999999; line-height: 2; } .weui-form-preview__ft { position: relative; line-height: 50px; display: -webkit-box; display: -webkit-flex; display: flex; } .weui-form-preview__ft:after { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D5D5D6; color: #D5D5D6; } .weui-form-preview__item { overflow: hidden; } .weui-form-preview__label { float: left; margin-right: 1em; min-width: 4em; color: #999999; text-align: justify; text-align-last: justify; } .weui-form-preview__value { display: block; overflow: hidden; word-break: normal; word-wrap: break-word; } .weui-form-preview__btn { position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #3CC51F; text-align: center; } .weui-form-preview__btn:after { content: " "; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1rpx solid #D5D5D6; color: #D5D5D6; } .weui-form-preview__btn:first-child:after { display: none; } .weui-form-preview__btn_active { background-color: #EEEEEE; } .weui-form-preview__btn_default { color: #999999; } .weui-form-preview__btn_primary { color: #0BB20C; } .weui-cell_select { padding: 0; } .weui-select { position: relative; padding-left: 15px; padding-right: 30px; height: 2.58823529em; min-height: 2.58823529em; line-height: 2.58823529em; border-right: 1rpx solid #D9D9D9; } .weui-select:before { content: " "; display: inline-block; height: 6px; width: 6px; border-width: 2px 2px 0 0; border-color: #C8C8CD; border-style: solid; -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); position: relative; top: -2px; position: absolute; top: 50%; right: 15px; margin-top: -4px; } .weui-select_in-select-after { padding-left: 0; } .weui-cell__hd_in-select-after, .weui-cell__bd_in-select-before { padding-left: 15px; } .weui-cell_vcode { padding-right: 0; } .weui-vcode-img { margin-left: 5px; height: 2.58823529em; vertical-align: middle; } .weui-vcode-btn { display: inline-block; height: 2.58823529em; margin-left: 5px; padding: 0 0.6em 0 0.7em; border-left: 1px solid #E5E5E5; line-height: 2.58823529em; vertical-align: middle; font-size: 17px; color: #3CC51F; white-space: nowrap; } .weui-vcode-btn:active { color: #52a341; } .weui-cell_switch { padding-top: 6px; padding-bottom: 6px; } .weui-uploader__hd { display: -webkit-box; display: -webkit-flex; display: flex; padding-bottom: 10px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-uploader__title { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .weui-uploader__info { color: #B2B2B2; } .weui-uploader__bd { margin-bottom: -4px; margin-right: -9px; overflow: hidden; } |
请发表评论