数据分析页面代码太长，把css拆成独立文件

Author: SunQQQ

src/components/MainPage/analytics.vue

@@ -770,219 +770,5 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "../../static/css/base";
-@import "../../static/css/AboutMe";
-
-/*pc*/
-@media only screen and (min-device-width : 768px) {
-  .content {
-    width: 1088px;
-    margin: 74px auto 0;
-  }
-
-  .pie-content {
-    display: flex;
-    align-items: center;
-  }
-
-  .pie-item {
-    
-    height: 250px;
-  }
-  .scal-left{
-    flex: 40%;
-  }
-  .scal-center{
-    flex: 25%;
-  }
-  .scal-right{
-    flex: 35%;
-  }
-}
-
-/*mobile*/
-@media only screen and (max-device-width : 768px) {
-  .content {
-    margin: 88px auto 0;
-  }
-
-  .give-up {
-    display: none !important;
-  }
-
-  .pie-content {
-    text-align: center;
-  }
-
-  .pie-item {
-    flex: 1;
-    height: 250px;
-  }
-
-  .action-padding {
-    padding-right: 1rem;
-  }
-}
-
-.quota-content {
-  .myflex(center);
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.quota-item {
-  flex: 1;
-  text-align: center;
-}
-
-.quota-item .num {
-  font-size: 1.2rem;
-  margin-bottom: 0;
-}
-
-.block {
-  background-color: #FFFFFF;
-  margin-top: 1rem;
-  padding: 1.5rem;
-  border-radius: 2px;
-}
-
-.block-name {
-  padding: 0.5rem;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.block-nopadding{
-  padding: 0 !important
-}
-
-.padding-left-right{
-  padding: 1.5rem;
-}
-
-.title-part {
-  display: flex;
-  align-items: end;
-}
-
-.module-title {
-  font-size: 18px;
-  font-weight: 500;
-  height: 18px;
-  line-height: 18px;
-}
-
-.list {
-  border: 1px solid #e9e9e9;
-  margin-top: 1.5rem;
-}
-
-.day-switch {
-  color: #999;
-  font-size: 12px;
-  line-height: 12px;
-  display: flex;
-  vertical-align: middle;
-  margin-left: 1rem;
-  cursor: pointer;
-}
-
-.total-number {
-  color: @DefaultFontColor;
-  flex: 1;
-  text-align: right;
-  cursor: auto;
-  display: block;
-}
-
-.item {
-  padding: 0 0.5rem;
-  border-right: 1px solid #999;
-}
-
-.item:first-child {
-  padding-left: 0;
-}
-
-.item:last-child {
-  border-right: none;
-}
-
-.item:hover {
-  color: rgba(1, 189, 255, 0.75);
-}
-
-.active {
-  color: #01aaed;
-}
-
-.line-chart {
-  height: 300px;
-  margin-top: 1.5rem;
-}
-
-.map-chart {
-  height: 400px;
-}
-
-.list-head {
-  color: #8590a6;
-  .myflex(center);
-  border-bottom: 1px solid #f0f0f0;
-  padding: 8px 0;
-}
-
-.list-tr {
-  .myflex(center);
-  //border-bottom: 1px solid #f0f0f0;
-  padding: 8px 0;
-  border-bottom: 1px solid #e9e9e9;
-}
-
-.list-td {
-  flex: 1;
-  padding-left: 1rem;
-  overflow: hidden;
-}
-
-.line-heigh {
-  line-height: 1.1rem;
-}
-
-.list-td:nth-child(1) {
-  flex: 18%;
-}
-
-.list-td:nth-child(2) {
-  flex: 37%;
-}
-
-.list-td:nth-child(3) {
-  flex: 13%;
-}
-
-.list-td:nth-child(4) {
-  flex: 10%;
-  border-right: none;
-  text-align: center !important;
-}
-
-.list-td:nth-child(5) {
-  flex: 22%;
-  border-right: none;
-}
-
-.list-td ul {
-  margin-block-start: 0em;
-  margin-block-end: 0em;
-  padding-inline-start: 16px;
-}
-
-.list .single {
-  background: #f6f6f6;
-}
-
-.list .align {
-  text-align: right;
-  padding-right: 1rem;
-}
+  @import "../../static/css/analytic";
 </style>