@pubinfo-pr/module-rbac 0.222.3 → 0.223.1

package/src/views/theme_setting/index.vue

@@ -223,32 +223,17 @@ async function updateConfig(options: object) {
 
 <style scoped>
 .theme-item {
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  border-width: 1px;
-  border-color: var(--border-2, #e5e6eb);
-  padding-top: 0.75rem; /* 12px */
-  padding-bottom: 0;
-  padding-left: 1.5rem; /* 24px */
-  padding-right: 1.5rem; /* 24px */
-  border-radius: 0.5rem; /* 8px */
-  border-style: solid;
+  --at-apply: flex flex-col cursor-pointer border border-[color:var(--border-2,#e5e6eb)] pt-3 pb-0 px-6 rounded-lg border-solid;
   background: linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
 }
 
 .theme-item.active {
-  border-color: rgb(var(--ui-primary));
-  --un-shadow: 0 2.6px 13px 0 var(--un-shadow-color, rgb(89 98 105 / 0.25));
-  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-    var(--un-shadow);
-  border-width: 2.6px;
-  border-style: solid;
+  --at-apply: border-[rgb(var(--ui-primary))] shadow-[0_2.6px_13px_0_#59626940] border-[2.6px] border-solid;
   background: linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
 }
 
 .theme-item.dark {
-  border-color: transparent;
+  --at-apply: border-transparent;
   background: linear-gradient(0deg, #3a3e43 0%, #3a3e43 100%), linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
 }
 
@@ -257,21 +242,11 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.875rem; /* 14px */
-  line-height: 1.25rem; /* 20px */
-  line-height: 22px;
-  text-align: center;
-  margin: 0;
-  padding: 0;
+  --at-apply: flex items-center justify-center text-sm leading-[22px] text-center m-0 p-0;
 }
 
 .theme-item .item-content {
-  display: flex;
-  flex: 1 1 0%;
-  flex-direction: column;
+  --at-apply: flex flex-1 flex-col;
   padding: calc(12 / 320 * 100%) calc(20 / 320 * 100%);
   margin-top: calc(12 / 320 * 100%);
   background: linear-gradient(180deg, #fff 0%, #fff0 100%);
@@ -287,13 +262,7 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-content .color-spot {
-  flex-shrink: 0;
-  max-width: 30px;
-  aspect-ratio: 1;
-  border-radius: 30px;
-  border-width: 2px;
-  border-style: solid;
-  border-color: white;
+  --at-apply: shrink-0 max-w-[30px] aspect-[1] rounded-[30px] border-2 border-solid border-white;
   background: #fff;
   width: calc(30 / 270 * 100%);
   box-shadow: 0 0 4px 0 #00000026;
@@ -324,12 +293,7 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-content .skeleton {
-  display: flex;
-  flex: auto;
-  flex-direction: column;
-  height: 0;
-  border-radius: 0.25rem; /* 4px */
-  margin-top: 22px;
+  --at-apply: flex flex-[auto] flex-col h-0 rounded mt-[22px];
   background: #f5f8fe;
 }
 
@@ -338,11 +302,7 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-content .skeleton header {
-  display: flex;
-  align-items: center;
-  aspect-ratio: 10.45;
-  padding-left: 0.625rem; /* 10px */
-  border-radius: 4px 4px 0 0;
+  --at-apply: flex items-center aspect-[10.45] pl-2.5 rounded-[4px_4px_0_0];
 }
 
 .theme-item.dark .item-content .skeleton header {
@@ -350,8 +310,7 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-content .skeleton header .dot {
-  aspect-ratio: 1;
-  border-radius: 50%;
+  --at-apply: aspect-1 rounded-1/2;
   width: calc(8.5 / 230 * 100%);
   margin-right: calc(5 / 230 * 100%);
   background: rgb(255 255 255 / 50%);
@@ -362,7 +321,7 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-content .skeleton header .bar {
-  border-radius: 0.125rem; /* 2px */
+  --at-apply: rounded-sm;
   width: calc(68 / 230 * 100%);
   aspect-ratio: calc(68 / 7);
   background: rgb(255 255 255 / 50%);
@@ -373,15 +332,12 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-content .skeleton .skeleton-body {
-  display: flex;
-  flex: 1 1 0%;
-  height: 0;
+  --at-apply: flex flex-1 h-0;
   padding: calc(7 / 230 * 100%);
 }
 
 .theme-item .item-content .skeleton .skeleton-body .aside {
-  height: 100%;
-  border-radius: 0.25rem; /* 4px */
+  --at-apply: h-full rounded;
   width: calc(36 / 230 * 100%);
   padding-top: calc(12 / 230 * 100%);
   margin-right: calc(7 / 230 * 100%);
@@ -393,7 +349,7 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-content .skeleton .skeleton-body .aside .side-line {
-  border-radius: 0.125rem; /* 2px */
+  --at-apply: rounded-sm;
   width: calc(24.1 / 36.6 * 100%);
   aspect-ratio: calc(24.1 / 6.5);
   margin: 0 auto calc(4 / 36.6 * 100%);
@@ -405,15 +361,7 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-content .skeleton .skeleton-body .main {
-  display: flex;
-  flex: auto;
-  justify-content: space-between;
-  height: 100%;
-  padding-top: 5.2%;
-  padding-bottom: 3%;
-  padding-left: 5.6%;
-  padding-right: 5.6%;
-  border-radius: 0.125rem; /* 2px */
+  --at-apply: flex flex-[auto] justify-between h-full pt-[5.2%] pb-[3%] px-[5.6%] rounded-sm;
   background: #fff;
 }
 
@@ -422,16 +370,15 @@ async function updateConfig(options: object) {
 }
 
 .theme-item .item-content .skeleton .skeleton-body .main .left {
-  flex: 1 1 0%;
+  --at-apply: flex-1;
 }
 
 .theme-item .item-content .skeleton .skeleton-body .main .right {
-  width: 30%;
+  --at-apply: w-3/10;
 }
 
 .theme-item .item-content .skeleton .skeleton-body .main .left-item {
-  display: flex;
-  margin-bottom: 6.5;
+  --at-apply: flex mb-[6.5];
 }
 
 .theme-item .item-content .skeleton .skeleton-body .main .left-item .dot {

package/src/views/user/components/UserAuthorization.vue

@@ -252,10 +252,10 @@ defineExpose({
 
 <style scoped>
 .auth-card {
-  margin-top: 0.75rem; /* 12px */
+  --at-apply: mt-3;
 }
 
 .auth-card:first-of-type {
-  margin-top: 3px;
+  --at-apply: mt-3px;
 }
 </style>

package/src/views/watermark_setting/index.vue

@@ -213,10 +213,7 @@ function onSubmit() {
 
 <style scoped>
 .item_ani {
-  display: flex;
-  flex-direction: column;
-  padding-top: 26px;
-  border-radius: 0.5rem; /* 8px */
+  --at-apply: flex flex-col pt-[26px] rounded-lg;
   place-items: center center;
   background-color: var(--g-bg);
   border: 1px solid var(--g-tabbar-tab-hover-bg);