crm-project/src/App.vue

<!--
 * @Author: your name
 * @Date: 2021-09-14 21:32:53
 * @LastEditTime: 2021-12-04 21:33:24
 * @LastEditors: Lone
 * @Description: In User Settings Edit
 * @FilePath: \crm-gmail\src\App.vue
-->
<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script>
//TODO: 项目的设计图片、字体、图标素材的整理及应用。 
export default {
  name: 'App',
  components: {
  },
};
</script>

<style>

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }

  /* 主题橙红色 #F86F54 */
  /* 辅助橙色 #F7A84A */
  /* 辅助绿色 #06A742 */
  /* 链接蓝色 #2AA7DE */


  html,body {
    padding: 0;
    margin: 0;
    background: #F8F8F8;
    background-color: #f0f2f5;
    height: 100vh;
    overflow: hidden;
    min-height: 650px;
    width: 100vw;
    color: #303133;
    /* overflow: hidden; */
  }

  html{
      /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
      /* -ms-overflow-style: none; */
      /*火狐下隐藏滚动条*/
      /* overflow: -moz-scrollbars-none; */
  }

  ::-webkit-scrollbar{
      /* display:none; */
  }

    /*滚动条 start*/  
    ::-webkit-scrollbar {  
        width: 7px;  
        height: 4px;  
        background-color: #F5F5F5;  
    }  
    /*定义滚动条轨道 内阴影+圆角*/  
    ::-webkit-scrollbar-track {  
        /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);   */
        background: #fff ;  
    }  
    /*定义滑块 内阴影+圆角*/  
    ::-webkit-scrollbar-thumb {  
        border-radius: 3px;  
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
        background-color:rgba(158, 158, 158, 0.7);  
    }  
    ::-webkit-scrollbar-thumb:hover {  
        border-radius: 3px;  
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
        background-color:rgba(158, 158, 158, 1);  
    }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* text-align: center; */
    color: #2c3e50;
    width: 100vw;
    height: 100vh;
    /* min-height: 750px; */
    background: #F8F8F8;
    background-color: #f0f2f5;
  }

  /* info: ========以下部分是項目需要用到的 按鈕、字體、邊框、佈局等基礎配置======== */
  /* 主要文字 */
  .primary-text {
    color: #2c3e50;
  }

  .default-text {
    color: #bebebe;
  }

  .title-text {
    color: #F7A84A;
  }

  .link-text {
    color: #1890ff;
    text-decoration: underline;
  }

  /* 主按钮，橙红色背景 */
  .primary-btn {
    background: #F86F54;
    color: #ffffff;
    border-color: #F86F54;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
    -webkit-box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
  }

  .primary-btn:hover ,.primary-btn:focus {
    background: #f3816a;
    border-color: #f3816a;
    color: #ffffff !important;
  }

  .ant-btn:hover ,.ant-btn:focus {
    /* background: #f3816a; */
    border-color: #f3816a;
    color: #f3816a;
  }

  /* 次按钮，橙色背景 */
  .default-btn {
    background: #F7A84A;
    color: #ffffff;
    border-color: #F7A84A;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
    -webkit-box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
  }

  .default-btn:hover ,.default-btn:focus {
    background: #f5b568;
    border-color: #f5b568;
    color: #ffffff !important;
  }

  /* 灰色按鈕 */
  .gray-btn {
    background: #f4f3f4;
    border: 1px solid #e2e2e2;
    width: 30px;
    height: 30px;
    border-radius: 3px;
  }

  /* //optimize: 優化灰色背景按鈕的hover、focus  */
  /* .gray-btn:hover ,.gray-btn:focus { 
    background: #f5b568;
    border-color: #f5b568;
    color: #ffffff !important;
  } */

  /* //optimize: 優化border-btn */
  .border-btn {
    border: 1px solid #e2e2e2;
    border-radius: 3px;
  }

  /* 细长型的按钮 */
  .long-btn {
    padding: 0 28px;
  }

  /* 多次用到的带边框的的背景颜色为低明度黄色的框 */
  .primary-box {
    background: #FFFEFB;
    border: 1px solid #e8e8e8;
  }

  .avator-lg img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* margin: 0 5px 0 12px; */
  }

  .avator-md img{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    /* margin: 0 5px 0 12px; */
  }

  .avator-sm img{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    /* margin: 0 5px 0 12px; */
  }

  .layout {
    height: 100%;
  }

  .layout-header {
    padding: 0;
  }


  .layout-sider {
    background: #ffffff !important;
    border-right: 1px solid #E8E8E8 !important;
  }

  .layout-content {
    background: #F8F8F8;
    background-color: #f0f2f5;
    position: relative;
    min-width: 960px;
    overflow-x: scroll;
    /* padding: 20px; */
  }

</style>