个性化设置

ZZJ

2021-09-27 e815b477b8619f8ad23fe08b9039c8d5f3f57cfc

个性化设置

 src/pages/settings/views/generalSettings.vue

@@ -181,15 +181,40 @@
        </div>



        <div class="self-setting" v-if="activePage == 2">

          <div class="top-title">图标主题</div>

          <div class="top-title">颜色主题</div>

          <div class="color-bar">           
            <div

            v-for="(item,index) in colorList"

            :key="index"   
            >

            <div class="color-option"

            v-if="universalColor != index"

            :style="{cursor: pointer,backgroundColor:item.color}"

            @click="colorCard(item.color,index)"

            />    


            <div class="color-option color-option-active"

            v-else

            :style="{cursor: pointer,border:`2px solid ${item.color}`}"

            @click="colorCard(item.color,index)">

           <div 
           :style="{backgroundColor:item.color}"

           class="color-option-content">

           </div>

  
            </div>

          </div>

          </div>



          


          <div class="top-title">图标主题</div>

          <div class="icon-bar" style="cursor: pointer" @click="selectIcons(0)">

            <div class="bar-title">

              <span class="title">扁平写实图标</span>

              <span

                class="icon iconfont"

                style="color: #3d68e1; font-size: 18px"

                v-show="activeIcons == 0"

                :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'"

                >&#xe6f1;</span

              >

            </div>

@@ -198,7 +223,6 @@
                class="entity-img"

                v-for="(item, i) in realIconList"

                :key="i"

                @click="colorCard(item.color)"

              >

                <img :src="item.url" alt="" />

              </div>

@@ -209,8 +233,7 @@
              <span class="title">扁平化图标</span>

              <span

                class="icon iconfont"

                style="color: #3d68e1; font-size: 18px"

                v-show="activeIcons == 1"

                :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'"

                >&#xe6f1;</span

              >

            </div>

@@ -224,13 +247,14 @@
              </div>

            </div>

          </div>

          
          <div class="top-title">桌面背景主题</div>

          <div class="bg-bar">

            <div class="bg-list">

              <div

                class="bg-img"

                :class="activeBg == i ? 'bg-list-active' : ''"

                v-for="(item, i) in tableBGList"

                class="bg-img"

                :class="activeBg == i ? 'bg-list-active' : ''"              
                :key="i"

                @click="pickBg(item, i)"

              >

@@ -302,6 +326,18 @@
        { name: "message", url: "/images/settings/数据推送.png" },

        { name: "weather", url: "/images/settings/系统设置.png" },

      ],

      universalColor:'',

      colorList: [

        {name:1 ,color:"#FC6B9E"},

        {name:2 ,color:"#F38F56"},

        {name:3 ,color:"#FDD33A"},

        {name:4 ,color:"#53D999"},

        {name:5 ,color:"#21CDB2"},

        {name:6 ,color:"#61E2EB"},

        {name:7 ,color:"#4E94FF"},

        {name:8 ,color:"#8E8CD8"},

        {name:9 ,color:"#4C4A48"},

      ]

    };

  },

  mounted() {

@@ -354,6 +390,7 @@
        },

        "*"

      );

      this.$forceUpdate()

    },

    togglePlay(item, i) {

      if (this.curPlayingIndex !== null) {

@@ -482,7 +519,8 @@
        }

      });

    },

    colorCard(color) {

    colorCard(color,index) {

      this.universalColor = index

      document.documentElement.style.setProperty('--colorCard',`${color}`)

      localStorage.setItem('--colorCard',`${color}`)

    }

@@ -539,15 +577,16 @@
      background-color: var(--colorCard) !important;

      color: white !important;

    }

   /*  .menu-item:hover {

    .menu-item:hover {

      background-color: #F2F2F7;

    } */

    }

  }

  .general-right {

    flex: 1;

    flex-basis: auto;

    overflow: auto;

    box-sizing: border-box;

    background-color: rgb(251, 250, 255);



    padding: 10px 18px 10px 10px;

    .el-form-item.is-required:not(.is-no-asterisk)

@@ -597,7 +636,7 @@
      }

      .bar-group {

        overflow: auto;

        height: 520px;

        height: 400px;

      }

      .bar {

        height: 48px;

@@ -668,7 +707,7 @@
        width: fit-content;

        .icon {

          font-size: 40px;

          color: rgba(61, 104, 225, 1);

          color: var(--colorCard);

        }

      }

      .min-dur {

@@ -741,7 +780,7 @@
      }

    }

    .save-btn {

      background-color: #3d68e1;

      background-color: var(--colorCard);

      width: 240px;

      height: 40px;

      margin: 0 auto;

@@ -754,21 +793,53 @@
    }

    .self-setting {

      .top-title {

        text-align: left;

        font-size: 16px;

        height: 30px;

        line-height: 30px;

        margin-bottom: 10px;

        font-weight: 700;

        margin-top: 20px;

      }

      .icon-bar:hover {

  /*     .icon-bar:hover {

        background-color: rgba(233, 233, 233, 1);

      } */

      .color-bar {

        display: flex;

        justify-content: center;

        align-items: center;

        width: 412px;

        height: 96px;

        background-color: #fff;

        border-radius: 8px;

        padding-left:7px ;

        .color-option {

          margin-right:12px ;

          width: 30px;

          height: 30px;

          border-radius:50% ;

        }



        .color-option-active {

          box-sizing: border-box;

          margin-right:12px ;

          width: 30px;

          height: 30px;

          border-radius:50% ;

          background-color: #fff;

          padding: 3px;

          .color-option-content {

            width: 100%;

            height: 100%;

            border-radius:50% ;

          }

        }

      }

      .icon-bar {

        cursor: pointer;

        background-color: rgba(248, 248, 248, 1);

        box-sizing: border-box;

        padding: 15px 25px;

        border-radius: 12px;

        margin-bottom: 12px;

        padding: 15px 13px 14px 20px;

        background: #F2F2F7;

        border-radius: 8px;

        margin-bottom: 10px;

        .bar-title {

          line-height: 20px;

          height: 20px;

@@ -777,10 +848,20 @@
          justify-content: space-between;

          .title {

            font-size: 14px;

            font-weight: 700;

          }

          .icon-active {

            font-size: 16px;

            color: var(--colorCard);

          }

          .icon-normal {

            font-size: 16px;

            color: #E0E0E0;

          }

        }

        .entity {

          display: flex;

          margin-left:5px ;

          .entity-img {

            background-color: rgba(248, 248, 248, 1);

            width: 50px;

@@ -794,7 +875,7 @@
        }

      }

      .bg-bar {

        background-color: rgba(248, 248, 248, 1);

        background-color: #F2F2F7;

        box-sizing: border-box;

        padding: 15px 25px;

        border-radius: 12px;

@@ -805,18 +886,19 @@
            margin-right: 12px;

            cursor: pointer;

            // width: 120px;

            height: 80px;

            height: 66px;

            border: 2px solid transparent;

            img {

              border-radius: 5px;

              height: 100%;

            }

          }

          .bg-img:hover {

         /*  .bg-img:hover {

            border: 2px solid yellow;

          }

          } */

          .bg-list-active {

            border: 2px solid yellow;

            border: 2px solid var(--colorCard);

            border-radius: 8px;

          }

        }

      }

@@ -867,7 +949,7 @@
}



.info-click {

  color: #4E94FF;

  color: var(--colorCard);

  text-decoration: underline;

}



@@ -922,7 +1004,7 @@
      }

    }

    button:last-child {

      background-color: #4E94FF !important;

      background-color: var(--colorCard) !important;

      span { 

         color: #fff;

      }


 src/pages/settings/views/keyboardLanguage.vue

@@ -26,7 +26,7 @@
            <span class="name">{{ item.Name }}</span>

            <span

              class="icon iconfont"

              style="color: #4E94FF;font-size:16px;"

              style="color: var(--colorCard);font-size:16px;"

              v-show="activeLang == item.Lang"

              >&#xe6f1;</span

            >

@@ -192,12 +192,11 @@
      }

    }

    .menu-item-active {

      background-color: var(--colorCard);

      background-color: var(--colorCard) !important;

      color: white;

    }

    .menu-item:hover {

      background-color: var(--colorCard);

      color: white;

      background-color: #F2F2F7;

    }

  }

  .language-right {

@@ -256,7 +255,7 @@
        }

      }

      .bar:hover{

            border: 2px solid #4E94FF;

            border: 2px solid var(--colorCard);

      }

      .title {

         cursor:default ;

@@ -265,7 +264,7 @@
       border: 2px solid #f8f8f8 !important;

      }

    }

    .save-btn {

    /* .save-btn {

      background-color: #3d68e1;

      width: 240px;

      height: 40px;

@@ -275,7 +274,7 @@
      line-height: 40px;

      font-size: 14px;

      margin-top: 20px;

    }

    } */

  }

}

</style>