feat: unify project responsive layouts

pages/family/f09-media-upload.vue

@@ -342,6 +342,8 @@ onLoad((query) => {
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+
 .media-upload-page {
   display: flex;
   min-height: 100vh;
@@ -356,6 +358,7 @@ onLoad((query) => {
   padding: 20rpx 24rpx calc(48rpx + env(safe-area-inset-bottom));
 }
 .media-album-card {
+  @include adaptive.adaptive-family-panel;
   display: grid;
   min-height: 154rpx;
   box-sizing: border-box;
@@ -363,11 +366,6 @@ onLoad((query) => {
   gap: 20rpx;
   align-items: center;
   padding: 14rpx 20rpx;
-  border: 20rpx solid transparent;
-  border-image-source: url("/static/assets/modules/family/transparent/module-content-frame.png");
-  border-image-slice: 72 fill;
-  border-image-width: 58rpx;
-  border-image-repeat: stretch;
 }
 .media-album-card__cover {
   width: 132rpx;
@@ -604,15 +602,11 @@ onLoad((query) => {
 }
 .media-permission-card,
 .media-success-card {
+  @include adaptive.adaptive-family-panel;
   min-height: 410rpx;
   margin-top: 24rpx;
   box-sizing: border-box;
   padding: 98rpx 46rpx 58rpx;
-  border: 20rpx solid transparent;
-  border-image-source: url("/static/assets/modules/family/transparent/module-content-frame.png");
-  border-image-slice: 72 fill;
-  border-image-width: 64rpx;
-  border-image-repeat: stretch;
   text-align: center;
 }
 .media-state-card__eyebrow {