滚动条问题

9d5c63d1 · guangjun.yang · bc39e135 · 9d5c63d1 · 9d5c63d1 · 9d5c63d1
--- a/src/components/education/custom/course-list.vue
+++ b/src/components/education/custom/course-list.vue
@@ -158,15 +158,15 @@ export default {
  min-width: 1180px;
  max-width: 1600px;
  .course-header {
-    position: relative;
-    top: 0;
-    left: 0;
+    // position: relative;
+    // top: 0;
+    // left: 0;
    display: flex;
    flex-direction: row;
    height: 78px;
    // line-height: 78px;
    align-items: center;
-    margin-right: 100px;
+    // margin-right: 100px;
    justify-content: space-between;
    .title {
      .main {
@@ -182,14 +182,14 @@ export default {
      }
    }
    .order {
-      position: absolute;
+      // position: absolute;
      // top: 0;
-      left: 880px;
-      width: 200px;
+      // left: 880px;
+      // width: 200px;
      display: flex;
      flex-direction: row;
      align-items: center;
-      margin-right: 20px;
+      // margin-right: 20px;
      font-size: 14px;
      color: #333333;
      img {

--- a/src/components/education/custom/course-select.vue
+++ b/src/components/education/custom/course-select.vue
 <template>
-  <div>
+  <div class="custom-over">
    <!-- <div class="custom-select-wrapper" style="overflow:auto;">
      <div class="department-label" style="width: 1200px;"> -->
    <div class="custom-select-wrapper">
@@ -407,8 +407,8 @@ export default {
 .button-wrapper {
  display: flex;
  flex-direction: row;
-  // justify-content: flex-end;
+  justify-content: flex-end;
  margin-top: 20px;
-  margin-left: 956px;
+  margin-right: 20px;
 }
 </style>
\ No newline at end of file
--- a/src/components/education/custom/custom-baseinfo.vue
+++ b/src/components/education/custom/custom-baseinfo.vue
@@ -692,13 +692,14 @@ export default {
  }
 };
 </script>
-<style >
+<style>
+
 .subject-slelct .el-input__inner {
  height: 32px;
  line-height: 32px;
 }
 </style>
-<style lang="scss" scoped>
+<style lang="scss">
 .base-message-wrap {
  padding-top: 80px;
  .p_label {

--- a/src/components/education/custom/index.html
+++ b/src/components/education/custom/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+ /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
+::-webkit-scrollbar  
+{  
+    width: 16px;  
+    height: 16px;  
+    background-color: #F5F5F5;  
+}  
+  
+/*定义滚动条轨道 内阴影+圆角*/  
+::-webkit-scrollbar-track  
+{  
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
+    border-radius: 10px;  
+    background-color: #F5F5F5;  
+}  
+  
+/*定义滑块 内阴影+圆角*/  
+::-webkit-scrollbar-thumb  
+{  
+    border-radius: 10px;  
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
+    background-color: #555;  
+} 
+  </style>
+</head>
+<body>
+  <div class="name" style="overflow: auto;width: 100px;">
+    <div style="width: 1200px;">wewfwef</div>
+  </div>
+</body>
+</html>
\ No newline at end of file
--- a/src/components/education/custom/select-course-comp.vue
+++ b/src/components/education/custom/select-course-comp.vue
@@ -29,5 +29,6 @@ export default {
      height: 10px;
      background: rgb(240, 242, 245);
    }
+
  }
 </style>
\ No newline at end of file
--- a/src/views/education/edit-custom.vue
+++ b/src/views/education/edit-custom.vue
@@ -8,7 +8,7 @@
    ></bread-crumb>

    <div class="add-content screenSet" id="screenSet">
-      <el-row class="step-content">
+      <el-row class="step-content-new">
        <el-col style="width: 700px;">
          <el-steps :active="active" simple class>
            <span class="step-num" v-bind:class="{ 'on-step': active==0 }">1</span>
@@ -537,7 +537,30 @@ export default {
 </script>

 <style lang="scss">
+
 .edit-custom-wrap {
+      ::-webkit-scrollbar  
+    {  
+        width: 16px;  
+        height: 16px;  
+        background-color: #F5F5F5;  
+    }  
+      
+    /*定义滚动条轨道 内阴影+圆角*/  
+    ::-webkit-scrollbar-track  
+    {  
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
+        border-radius: 10px;  
+        background-color: #F5F5F5;  
+    }  
+      
+    /*定义滑块 内阴影+圆角*/  
+    ::-webkit-scrollbar-thumb  
+    {  
+        border-radius: 10px;  
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
+        background-color: #555;  
+    }
  .el-step.is-simple:not(:last-of-type) .el-step__title {
    max-width: 100%;
  }
@@ -550,14 +573,14 @@ export default {
    z-index: 1001;
    top: 125px;
  }
-  .step-content {
+  .step-content-new {
    min-width: 1300px;
    background: #fff;
-    z-index: 1001;
+    // z-index: 1001;
    background: #fff;
-    position: fixed;
-    right: 30px;
-    left: 285px;
+    // position: fixed;
+    // right: 30px;
+    // left: 285px;
    overflow: hidden;
    // height: 60px;
    height: 54px;
@@ -565,7 +588,7 @@ export default {
    // margin-top: 66px;
    padding: 15px 0 50px 0;
    border-bottom: 1px solid #efefef;
-    margin-bottom: 20px;
+    // margin-bottom: 20px;
    background: #fff;
    .is-text {
      display: none;
@@ -735,7 +758,8 @@ export default {
    }
  }
  .tpl-main {
-    padding-top: 64px;
+    // padding-top: 64px;
+    
  }
 }
 </style>