| | |
|---|
| | | <template>
|
|---|
| | | <div class="switch-bar">
|
|---|
| | | <div class="name">{{ barName }}</div>
|
|---|
| | | <el-switch
|
|---|
| | | v-model="value"
|
|---|
| | | active-color="rgba(61, 104, 225, 1)"
|
|---|
| | | @change="switchChange"
|
|---|
| | | >
|
|---|
| | | <el-switch v-model="value" active-color="#4e94ff" @change="switchChange">
|
|---|
| | | </el-switch>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | export default {
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | | // value: false,
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | props: ["barName","value"],
|
|---|
| | | props: ["barName", "value"],
|
|---|
| | | methods: {
|
|---|
| | | switchChange(val) {
|
|---|
| | | this.$emit("switchChange",val);
|
|---|
| | | this.$emit("switchChange", val);
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | };
|
|---|
| | |
|---|
| | | align-items: center;
|
|---|
| | | height: 50px;
|
|---|
| | | padding: 0 25px;
|
|---|
| | | background-color: rgba(248, 248, 248, 1);
|
|---|
| | | justify-content: space-between;
|
|---|
| | | border-radius: 12px;
|
|---|
| | | margin-bottom: 10px;
|
|---|
| | | .name {
|
|---|
| | | .el-switch {
|
|---|
| | | display: inline-flex;
|
|---|
| | | align-items: center;
|
|---|
| | | position: relative;
|
|---|
| | | font-size: 14px;
|
|---|
| | | line-height: 14px;
|
|---|
| | | height: 14px;
|
|---|
| | | vertical-align: middle;
|
|---|
| | | .el-switch__core {
|
|---|
| | | width: 30px !important;
|
|---|
| | | height: 14px;
|
|---|
| | | border: 1px solid #E0E0E0;
|
|---|
| | | border-radius: 20px;
|
|---|
| | | background: #E0E0E0;
|
|---|
| | | }
|
|---|
| | | .el-switch__core:after {
|
|---|
| | | top: 0px;
|
|---|
| | | left: -1px;
|
|---|
| | | width: 12px;
|
|---|
| | | height: 12px;
|
|---|
| | | background-color: #fff;
|
|---|
| | | }
|
|---|
| | | .el-switch.is-checked .el-switch__core::after {
|
|---|
| | | margin-left: -10px;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | .name {
|
|---|
| | | font-size: 12px;
|
|---|
| | | color: #4f4f4f;
|
|---|
| | | font-weight: bold;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
