<!--部門(mén)功能-->
?? ??? ?<div class="department">
?? ??? ??? ?<div class="department-l">部門(mén)功能</div>
?? ??? ??? ?<div class="department-r">
?? ??? ??? ??? ?{{isShow?'開(kāi)啟':'關(guān)閉'}}
?? ??? ??? ??? ?<span class="switch" :class="{on:isShow}" @click.stop="switchDepartment">
?? ??? ??? ??? ??? ?<div class="switch-circle" :class={right:isShow}></div>
?? ??? ??? ??? ?</span>
?? ??? ??? ?</div>
</div>

css:

?.department {
? ? height: px2rem(178);
? ? background: #ffffff;
? ? padding: 0 px2rem(66) 0;
? ? margin-top: px2rem(4);
? ? display: flex;
? ? justify-content: space-between;
? ? .department-l {
? ? ? line-height: px2rem(178);
? ? ? font-size: px2rem(53);
? ? ? ccolor: #303030;
? ? }
? ? .department-r {
? ? ? line-height: px2rem(178);
? ? ? font-size: px2rem(50);
? ? ? color: #454545;
? ? }
? }
? .switch{
? ? display: inline-block;
? ? width: px2rem(140);
? ? height: px2rem(86);
? ? background: #DBDBDB;
? ? border-radius: px2rem(331);
? ? position: relative;
? ? vertical-align: middle;
? ? margin-left: px2rem(31);
? ? .switch-circle{
? ? ? position: absolute;
? ? ? left: px2rem(6);
? ? ? top: px2rem(6);
? ? ? width: px2rem(73);
? ? ? height: px2rem(73);
? ? ? border-radius: 50%;
? ? ? background: #fff;
? ? }
? }
? .on{
? ? background: -webkit-linear-gradient(left, #19A89F, #9CDD97); /* Safari 5.1 - 6.0 */
? ? background: -o-linear-gradient(right, #19A89F, #9CDD97 ); /* Opera 11.1 - 12.0 */
? ? background: -moz-linear-gradient(right, #19A89F , #9CDD97); /* Firefox 3.6 - 15 */
? ? background: linear-gradient(to right, #19A89F, #9CDD97); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
? }
? .right{
? ? transform :translateX(px2rem(55))
? }

js:

<script>
?? ?export default {
?? ??? ?name: "clientCreate",
?? ??? ?data() {
?? ??? ??? ?return {
?? ?
?? ??? ??? ??? ?isShow:false
?? ??? ??? ?}
?? ??? ?},
?? ??? ?created: function () {
?
?? ??? ?},
?? ??? ?mounted: function () {
?? ??? ??? ?
?? ??? ?},
?? ??? ?methods: {
?
?? ??? ??? ?switchDepartment:function(){
?? ??? ??? ??? ?this.isShow=!this.isShow;
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ?}
?? ?}
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: