Jelajahi Sumber

项目页样式布局修改

tangjunhao 1 bulan lalu
induk
melakukan
cd24352037
3 mengubah file dengan 57 tambahan dan 12 penghapusan
  1. 12 3
      src/components/user/userinfo.vue
  2. 33 1
      src/style/index.css
  3. 12 8
      src/views/project/index.vue

+ 12 - 3
src/components/user/userinfo.vue

@@ -54,11 +54,11 @@
     <template #header>
       <h4>修改密码</h4>
     </template>
-    <el-form>
-      <el-form-item label="旧密码">
+    <el-form class="PWDform">
+      <el-form-item label="旧密码:">
         <el-input type="password" v-model="oldPassword"></el-input>
       </el-form-item>
-      <el-form-item label="新密码">
+      <el-form-item label="新密码:">
         <el-input type="password" v-model="newPassword"></el-input>
       </el-form-item>
     </el-form>
@@ -129,3 +129,12 @@ const ChangePassword = () => {
 }
 defineExpose({ visible, changePwdVisible })
 </script>
+
+<style scoped>
+.PWDform {
+  :deep(.el-form-item__label) {
+    color: #FFFFFF;
+  }
+}
+
+</style>

+ 33 - 1
src/style/index.css

@@ -386,6 +386,10 @@ img{
 
 }
 
+.el-dialog__title {
+  color: #FFFFFF;
+}
+
 .el-dialog .el-dialog__header {
   background-color: transparent;
   color: #FFFFFF !important;
@@ -447,6 +451,34 @@ img{
   background-color: transparent !important;
 }
 
-.custom-pagination .el-pagination .el-pager li.is-active {
+.custom-pagination .el-pagination .el-pager li {
   background-color: rgba(61, 219, 252, 0.20) !important;
+  color: #FFFFFF;
 }
+
+.custom-pagination .el-pagination .el-pager li.is-active {
+  background-color: #2CFFFF !important;
+  color: #000000;
+}
+
+/* 消息框 */
+.el-message-box {
+  background-image: url(@/assets/img/tkb.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+
+  .el-button, .el-button--primary {
+    background-color: rgba(61, 219, 252, 0.20) !important;
+    color: #FFFFFF;
+    /* border: 1px solid rgba(61, 219, 252, 1); */
+    border: none;
+  }
+}
+
+.el-message-box__title {
+  color: #FFFFFF;
+}
+
+.el-message-box__message {
+  color: #FFFFFF;
+}

+ 12 - 8
src/views/project/index.vue

@@ -45,7 +45,8 @@
           <div class="table-container custom-table">
             <el-table border 
             :data="projectlists" 
-            style="width: 100%;height: 100%; overflow: auto;"
+            style="width: 100%; overflow: auto;"
+            height="365"
             highlight-current-row
             @current-change="handleRowChange"
             >
@@ -61,7 +62,7 @@
             <div class="project-main-pagination">
               <div class="custom-pagination">
                 <el-pagination v-model:current-page="gd.currentPage" v-model:page-size="gd.pageSize"
-                  :page-sizes="[5, 10, 20, 50]" background size="default" layout="prev, slot, sizes, pager, next"
+                  :page-sizes="[8, 16, 32, 64]" background size="default" layout="prev, slot, sizes, pager, next"
                   :total="parseInt(gd.total)" class="mt-4" @size-change="handleSizeChange"
                   @current-change="handleCurrentChange">
                   <template #default>
@@ -101,7 +102,7 @@ const route = useRoute()
 
 const projectStore = useProjectStore()
 
-const isnew = ref(true)
+const isnew = ref(false)
 
 const newproject = ref({
   name: '',
@@ -111,7 +112,7 @@ const newproject = ref({
 let gd = ref({
     total: 1,
     currentPage: 1,
-    pageSize:5,
+    pageSize:8,
     searchtag: ''
 })
 
@@ -170,6 +171,8 @@ const opProject = () => {
 const addone = () => {
   isnew.value = true;
   titlename.value = '新建项目';
+  newproject.value.name = '';
+  newproject.value.remark = '';
 }
 
 const addProject = () => {
@@ -182,7 +185,7 @@ const addProject = () => {
     .then((res) => {
       console.log(res);
       ElMessage.success('添加成功');
-      // isnew.value = false;
+      isnew.value = false;
       getprojectlist();
     })
     .catch((err) => {
@@ -198,6 +201,8 @@ const editSelected = () => {
   }
   isnew.value = true;
   titlename.value = '编辑项目';
+  newproject.value.name = currentRow.value.name;
+  newproject.value.remark = currentRow.value.remark;
 }
 
 const editProject = () => {
@@ -212,7 +217,7 @@ const editProject = () => {
     .then((res) => {
       console.log(res);
       ElMessage.success('编辑成功');
-      // isnew.value = false;
+      isnew.value = false;
       getprojectlist();
     })
     .catch((err) => {
@@ -326,7 +331,6 @@ onMounted(() => {
 
 .project-content {
   width: 80%;
-  height: 70%;
   position: relative;
   border: 1px solid transparent;
   border-image: linear-gradient(to right, #0075FF, #00FFD8, #00FFD8) 1;
@@ -335,7 +339,7 @@ onMounted(() => {
 .newproject {
   width: 100%;
   height: 15%;
-  padding: 24px;
+  padding: 24px 24px 0;
 
   .newproject-header{
     font-size: 20px;