CSS-仿XP系统

一、自定义样式

1、页面样式

background-color: #d4d0c8;
box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.4),
inset 2px 2px 2px rgba(255, 255, 255, 0.4);

2、弹框样式

background-color: #d4d0c8; 
border-radius: 5px;
box-shadow: inset -1px -1px 5px rgba(0, 0, 0, 0.5),
inset 2px 2px 5px rgba(255, 255, 255, 1);

3、凹槽线条

border-top: 1.5px solid #999;
border-left: 1.5px solid #999;
border-right: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
box-sizing: border-box;
box-shadow: 0 1.5px 0 0 #fff inset, 1.5px 0 0 0 #fff inset,
-1.5px 0 0 0 #999 inset, 0 -1.5px 0 0 #999 inset;

4、凸起线条

padding: 10px;
box-sizing: border-box;
border-top: 3px solid #a7a7a7;
border-left: 3px solid #a7a7a7;
border-right: 3px solid #f0f0f0;
border-bottom: 3px solid #f0f0f0;
box-shadow: 0 1px 5px -2px #000 inset, 1px 0 5px -2px #000 inset,
-1px 0 5px -2px #ececec inset, 0 -1px 5px -2px #ececec inset;

二、element-ui样式

1、button

（1）button样式

/deep/ .el-button {
  height: 25px;
  background: url("../assets/img/public/buttonBg.png") no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
  font-size: 12px;
  color: @dColor;
  padding: 0px 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 50px;
}

（2）button选中时的样式

/deep/ .el-button.is-active,
/deep/ .el-button:active,
/deep/ .el-button:focus {
  background: url("../assets/img/public/buttonClickBg.png") no-repeat;
  background-size: 100% 100%;

}

（3）button悬停时的样式

/deep/ .el-button:hover {
  background: url("../assets/img/public/buttonHoverBg.png") no-repeat;
  background-size: 100% 100%;
}

2、input

（1）input样式

/deep/ .el-input__inner {
  background-color: #fff;
  border-color: #d4d0c8;
  border-radius: 0px;
  vertical-align: middle;
  height: 26px;
  font-size: 12px;
  padding: 0px 10px;
  box-shadow: inset 0.5px 0.5px 2px 0px #000;
}

（2）去除input框(number类型)右侧上下按钮-Chrome

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

（3）去除input框(number类型)右侧上下按钮-FireFox

/deep/ input[type="number"] {
  -moz-appearance: textfield !important;
}

（4）input禁用后的样式

/deep/ .is-disabled .el-input__inner {
  background: #eee;
}

（5）input-placeholder样式

/deep/ .el-input__inner::placeholder {
  font-weight: 300 !important;
  color: #666;
}

（6）input禁用时placeholder样式

/deep/ .el-input.is-disabled .el-input__inner::placeholder {
  font-weight: 300 !important;
}

3、el-checkbox

（1）el-checkbox字体、对齐方式

/deep/ .el-checkbox__label {
  font-size: 12px;
  vertical-align: baseline;
}

（2）el-checkbox悬停，选中时的样式

/deep/ .el-checkbox__inner::after,
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__inner:hover,
/deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #38322e;
}

（3）el-checkbox选中时的背景颜色

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #fff;
}

（4）el-checkbox选中时的字体颜色

/deep/ .el-checkbox__input.is-checked + .el-checkbox__label,
/deep/ .el-checkbox__label {
  color: #38322e;
}

4、el-select

（1）el-select右侧icon位置

/deep/ .el-input__icon {
  line-height: 30px;
  right: 5px;
}

（2）下拉列表样式

/deep/ .el-select-dropdown__item {
  width: 100% !important;
  padding: 0px 20px !important;
}

（3）el-select去除选中时的蓝色边框

/deep/ .el-select .el-input__inner {
  border-color: #d4d0c8 !important;
  font-size: 12px !important;
  padding: 0px 5px;
}

（4）禁用时的样式

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #eee !important;
}

5、radio

（1）radio字体样式

/deep/ .el-radio__label {
  font-size: 12px;
}

（2）radio选中时中心点颜色

/deep/ .el-radio__inner::after {
  background-color: #38322e;
}

（3）radio选中时背景颜色、边框样式

/deep/.el-radio__input.is-checked .el-radio__inner {
  background-color: #fff;
  border: none;
  box-shadow: inset 0.5px 0.5px 1px 0px @dColor;
}

（4）radio选中时的字体颜色

/deep/.el-radio__input.is-checked + .el-radio__label,
/deep/ .el-radio__label {
  color: #38322e;
}

（5）redio悬停时的边框颜色

/deep/ .el-radio__inner:hover {
  border-color: #38322e;
}

（6）radio 文字和勾选框居中对齐

/deep/ .el-radio__inner {
  vertical-align: middle;
  margin-top: -2px;
}

6、switch

（1）switch开启时的样式

/deep/ .el-switch.is-checked .el-switch__core {
  background: #316ac5 !important;
  border-color: #316ac5 !important;
}

（2）switch关闭时的样式

/deep/ .el-switch__core {
  background: red;
}

7、el-cascader

（1）el-cascader选中时的样式

/deep/ .el-cascader .el-input.is-focus .el-input__inner {
  border-color: #d4d0c8 !important;
}

（2）el-cascader样式

/deep/ .el-cascader {
  border-color: #d4d0c8 !important;
}

三、页面头部样式

1、html

<template>
  <div class="headerRoot">
    <div class="headerContent">
      <!-- titleText -->
      <div class="titleText">
        <span>{{ titleText }}</span>
      </div>
      <!-- closeBtn -->
      <CloseWinBtn class="closeBtn"></CloseWinBtn>
    </div>
  </div>
</template>

2、js

<script>
import CloseWinBtn from "./CloseWinBtn";

export default {
  name: "Header",
  components: {
    CloseWinBtn,
  },
  props: {
    titleText: {
      type: String,
      default: "",
    },
    winName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
};
</script>

3、css

<style lang="less" scoped>
.headerRoot {
  width: 100%;
  height: 100%;

  .headerContent {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #0b256b, #a6caf0);
    background-size: 100% 100%;
    background-color: #091229;
    position: relative;
    box-shadow: inset -2px 0px 2px rgba(0, 0, 0, 0.4),
      inset 2px 2px 2px rgba(244, 255, 255, 0.4);
    -webkit-app-region: drag;

    .titleText {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);

      span {
        font-size: 14px;
        color: #fff;
      }
    }

    .closeBtn {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
    }
  }
}
</style>

4、CloseWinBtn组件

// 项目是利用nw.js开发桌面应用程序
<template>
  <div class="closeBtnRoot">
    <div title="最小化" class="minimizeBtn el-icon-minus" @click="minScreen"></div>
    <div title="关闭" class="closeBtn el-icon-close" @click="closeWindow"></div>
  </div>
</template>

<script>
// 获取当前窗口
const win = nw.Window.get();

export default {
  name: "CloseWinBtn",
  props: {},
  data() {
    return {};
  },
  created() {},
  methods: {
    // 关闭当前窗口
    closeWindow() {
      win.close(true);
    },
    // 最小化
    minScreen() {
      win.minimize();
    },
  },
};
</script>

<style lang="less" scoped>
.closeBtnRoot {
  width: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // 关闭、最小化按钮样式
  .minimizeBtn,.closeBtn {
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    -webkit-app-region: no-drag;
  }

  // 关闭、最小化按钮hover
  .minimizeBtn:hover,.closeBtn:hover {
    background-color: red;
  }
}
</style>