fix:更新首页，logo，渐变色

dist/dev/mp-weixin/common/store/useWeAppAuthStore.js

@@ -14,7 +14,8 @@ const useWeAppAuthStore = common_vendor.defineStore("we_app_auth", () => {
     environment: "",
     house_occupant: false,
     house_register: false,
-    is_house_exist: 0
+    is_house_exist: 0,
+    config: {}
   });
   function login(app) {
     common_vendor.index.login({
@@ -28,12 +29,13 @@ const useWeAppAuthStore = common_vendor.defineStore("we_app_auth", () => {
   }
   const getWXToken = (app, code) => {
     gen_Apis.Apis.Login.Auth.Login({ code, app_id: wxAppId }).then((res) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e;
       console.log("登录", res == null ? void 0 : res.data);
       data.value.user = (_a = res.data) == null ? void 0 : _a.user;
       data.value.selected_house = (_b = res.data) == null ? void 0 : _b.selected_house;
+      data.value.config = (_c = res.data) == null ? void 0 : _c.config;
       loading.value = false;
-      common_vendor.index.setStorageSync("ACCESS_TOKEN_CUSTOMER", (_d = (_c = res == null ? void 0 : res.data) == null ? void 0 : _c.token) == null ? void 0 : _d.token);
+      common_vendor.index.setStorageSync("ACCESS_TOKEN_CUSTOMER", (_e = (_d = res == null ? void 0 : res.data) == null ? void 0 : _d.token) == null ? void 0 : _e.token);
       if (data.value.user) {
         getIsHouseExist();
       }

dist/dev/mp-weixin/common/vendor.js

@@ -11679,16 +11679,24 @@ class Request2 {
   }
 }
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-var dayjs_minExports = {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var dayjs_minExports$1 = {};
 var dayjs_min = {
   get exports() {
-    return dayjs_minExports;
+    return dayjs_minExports$1;
   },
   set exports(v) {
-    dayjs_minExports = v;
+    dayjs_minExports$1 = v;
   }
 };
-(function(module2, exports2) {
+var hasRequiredDayjs_min;
+function requireDayjs_min() {
+  if (hasRequiredDayjs_min)
+    return dayjs_minExports$1;
+  hasRequiredDayjs_min = 1;
+  (function(module2, exports2) {
     !function(t2, e2) {
       module2.exports = e2();
     }(commonjsGlobal, function() {
@@ -11976,8 +11984,11 @@ var dayjs_min = {
         return O(1e3 * t3);
       }, O.en = D[g], O.Ls = D, O.p = {}, O;
     });
-})(dayjs_min);
+  })(dayjs_min);
-const dayjs = dayjs_minExports;
+  return dayjs_minExports$1;
+}
+var dayjs_minExports = requireDayjs_min();
+const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
 var relativeTimeExports = {};
 var relativeTime$1 = {
   get exports() {
@@ -12041,7 +12052,7 @@ var zhCn = {
 };
 (function(module2, exports2) {
   !function(e2, _) {
-    module2.exports = _(dayjs_minExports);
+    module2.exports = _(requireDayjs_min());
   }(commonjsGlobal, function(e2) {
     function _(e3) {
       return e3 && "object" == typeof e3 && "default" in e3 ? e3 : { default: e3 };

dist/dev/mp-weixin/pages/index/components/PageHeadTitle.js

@@ -45,6 +45,25 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
     const handleSelectedHouse = (e) => {
       show.value = false;
     };
+    const getPageBgFun = () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
+      let cssStrColor = ((_g = (_f = (_e = (_d = (_c = (_b = (_a = pages_index_model.useModel) == null ? void 0 : _a.pageConfig) == null ? void 0 : _b.value) == null ? void 0 : _c.pageColorValue) == null ? void 0 : _d.colors) == null ? void 0 : _e[0]) == null ? void 0 : _f.color) == null ? void 0 : _g.metaColor) || "#d3d7ff";
+      let cssEndColor = ((_n = (_m = (_l = (_k = (_j = (_i = (_h = pages_index_model.useModel) == null ? void 0 : _h.pageConfig) == null ? void 0 : _i.value) == null ? void 0 : _j.pageColorValue) == null ? void 0 : _k.colors) == null ? void 0 : _l[1]) == null ? void 0 : _m.color) == null ? void 0 : _n.metaColor) || "#dffff3";
+      let strBgCode = ((_r = (_q = (_p = (_o = pages_index_model.useModel) == null ? void 0 : _o.pageConfig) == null ? void 0 : _p.value) == null ? void 0 : _q.pageColorValue) == null ? void 0 : _r.colors) ? `rgba(${cssStrColor == null ? void 0 : cssStrColor.r},${cssStrColor == null ? void 0 : cssStrColor.g},${cssStrColor == null ? void 0 : cssStrColor.b},${cssStrColor == null ? void 0 : cssStrColor.a})` : (_w = (_v = (_u = (_t = (_s = pages_index_model.useModel) == null ? void 0 : _s.pageConfig) == null ? void 0 : _t.value) == null ? void 0 : _u.pageColorValue) == null ? void 0 : _v[0]) == null ? void 0 : _w.color;
+      let endBgCode = ((_A = (_z = (_y = (_x = pages_index_model.useModel) == null ? void 0 : _x.pageConfig) == null ? void 0 : _y.value) == null ? void 0 : _z.pageColorValue) == null ? void 0 : _A.colors) ? `rgba(${cssEndColor == null ? void 0 : cssEndColor.r},${cssEndColor == null ? void 0 : cssEndColor.g},${cssEndColor == null ? void 0 : cssEndColor.b},${cssEndColor == null ? void 0 : cssEndColor.a})` : (_F = (_E = (_D = (_C = (_B = pages_index_model.useModel) == null ? void 0 : _B.pageConfig) == null ? void 0 : _C.value) == null ? void 0 : _D.pageColorValue) == null ? void 0 : _E[1]) == null ? void 0 : _F.color;
+      let bhg = `background: linear-gradient(180deg,rgba(208, 229, 255, 0.44) 0%,rgba(255, 255, 255, 0) 100%),linear-gradient(146deg,  ${strBgCode} 0%, rgba(255, 255, 255, 0) 55%),linear-gradient(194deg, ${endBgCode} 0%, #f8f8f8 65%);`;
+      return bhg;
+    };
+    const truncateString = (str) => {
+      if (!str)
+        return "-";
+      const maxLength = 15;
+      if (str.length <= maxLength)
+        return str;
+      const start = 6;
+      const end = 6;
+      return str.slice(0, start) + "..." + str.slice(-end);
+    };
     common_vendor.watch(
       () => {
         var _a;
@@ -73,26 +92,29 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
       show.value = false;
     });
     return (_ctx, _cache) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
       return common_vendor.e({
-        a: !((_a = userData.value) == null ? void 0 : _a.user)
+        a: (_f = (_e = (_d = (_c = (_b = (_a = userData.value) == null ? void 0 : _a.config) == null ? void 0 : _b.companyConfig) == null ? void 0 : _c.config_value) == null ? void 0 : _d.logo) == null ? void 0 : _e[0]) == null ? void 0 : _f.url
-      }, !((_b = userData.value) == null ? void 0 : _b.user) ? {} : !((_c = userData.value) == null ? void 0 : _c.selected_house) ? {} : {
+      }, ((_l = (_k = (_j = (_i = (_h = (_g = userData.value) == null ? void 0 : _g.config) == null ? void 0 : _h.companyConfig) == null ? void 0 : _i.config_value) == null ? void 0 : _j.logo) == null ? void 0 : _k[0]) == null ? void 0 : _l.url) ? {
-        c: common_vendor.t(((_e = (_d = userData.value) == null ? void 0 : _d.selected_house) == null ? void 0 : _e.full_name) || "-")
+        b: ((_r = (_q = (_p = (_o = (_n = (_m = userData.value) == null ? void 0 : _m.config) == null ? void 0 : _n.companyConfig) == null ? void 0 : _o.config_value) == null ? void 0 : _p.logo) == null ? void 0 : _q[0]) == null ? void 0 : _r.url) || ""
+      } : {}, {
+        c: !((_s = userData.value) == null ? void 0 : _s.user)
+      }, !((_t = userData.value) == null ? void 0 : _t.user) ? {} : !((_u = userData.value) == null ? void 0 : _u.selected_house) ? {} : {
+        e: common_vendor.t(truncateString(((_w = (_v = userData.value) == null ? void 0 : _v.selected_house) == null ? void 0 : _w.full_name) || ""))
       }, {
-        b: !((_f = userData.value) == null ? void 0 : _f.selected_house),
+        d: !((_x = userData.value) == null ? void 0 : _x.selected_house),
-        d: common_vendor.p({
+        f: common_vendor.p({
           name: "arrow-down-fill",
           size: "12",
           color: "#333"
         }),
-        e: common_vendor.o(handlePopupSwitchHouse),
+        g: common_vendor.o(handlePopupSwitchHouse),
-        f: common_vendor.o(($event) => show.value = false),
+        h: common_vendor.o(($event) => show.value = false),
-        g: common_vendor.o(handleSelectedHouse),
+        i: common_vendor.o(handleSelectedHouse),
-        h: common_vendor.p({
+        j: common_vendor.p({
           show: show.value
         }),
-        i: common_vendor.n(`custom-title ${((_h = (_g = common_vendor.unref(pages_index_model.useModel)) == null ? void 0 : _g.scrollTop) == null ? void 0 : _h.value) > 10 ? "custom_title_scroll_bg" : ""}`),
+        k: common_vendor.s(`padding-top:${capsuleRect.value.top}px;height:${capsuleRect.value.height}px;line-height:${capsuleRect.value.height}px;${props == null ? void 0 : props.objStyle};${((_z = (_y = common_vendor.unref(pages_index_model.useModel)) == null ? void 0 : _y.scrollTop) == null ? void 0 : _z.value) > 10 ? getPageBgFun() : ""}`)
-        j: common_vendor.s(`padding-top:${capsuleRect.value.top}px;height:${capsuleRect.value.height}px;line-height:${capsuleRect.value.height}px;${props == null ? void 0 : props.objStyle}`)
       });
     };
   }

dist/dev/mp-weixin/pages/index/components/PageHeadTitle.wxml

@@ -1 +1 @@
-<view class="{{['data-v-f5a8911c', i]}}" style="{{j}}"><view bindtap="{{e}}" class="user_houses_info data-v-f5a8911c"><text wx:if="{{a}}" class="data-v-f5a8911c">请先登录</text><text wx:elif="{{b}}" class="data-v-f5a8911c">请绑定您的房屋</text><text wx:else class="data-v-f5a8911c">{{c}}</text><up-icon wx:if="{{d}}" class="data-v-f5a8911c" u-i="f5a8911c-0" bind:__l="__l" u-p="{{d}}"></up-icon></view><hs-popup-switch-house wx:if="{{h}}" class="data-v-f5a8911c" bindclose="{{f}}" bindchange="{{g}}" u-i="f5a8911c-1" bind:__l="__l" u-p="{{h}}"/></view>
+<view class="custom-title data-v-f5a8911c" style="{{k}}"><view bindtap="{{g}}" class="user_houses_info data-v-f5a8911c"><image wx:if="{{a}}" class="data-v-f5a8911c" mode="aspectFill" src="{{b}}"/><text wx:if="{{c}}" class="data-v-f5a8911c">请先登录</text><text wx:elif="{{d}}" class="data-v-f5a8911c">请绑定您的房屋</text><view wx:else class="full_name data-v-f5a8911c">{{e}}</view><up-icon wx:if="{{f}}" class="data-v-f5a8911c" u-i="f5a8911c-0" bind:__l="__l" u-p="{{f}}"></up-icon></view><hs-popup-switch-house wx:if="{{j}}" class="data-v-f5a8911c" bindclose="{{h}}" bindchange="{{i}}" u-i="f5a8911c-1" bind:__l="__l" u-p="{{j}}"/></view>

dist/dev/mp-weixin/pages/index/components/PageHeadTitle.wxss

@@ -19,6 +19,15 @@
   justify-content: space-between;
   min-width: 100rpx;
 }
+.custom-title .user_houses_info .full_name.data-v-f5a8911c {
+  max-width: 300rpx;
+  padding: 0 15rpx;
+  overflow: hidden;
+}
+.custom-title .user_houses_info image.data-v-f5a8911c {
+  width: 48rpx;
+  height: 48rpx;
+}
 .custom_title_scroll_bg.data-v-f5a8911c {
   background: linear-gradient(270deg, #def6f8 0%, #d8e2fe 100%);
   padding-bottom: 20rpx;

dist/dev/mp-weixin/pages/index/index.js

@@ -32,12 +32,13 @@ const _sfc_defineComponent = /* @__PURE__ */ common_vendor.defineComponent({
       pages_index_model.useModel.scrollTop.value = e.scrollTop;
     });
     common_vendor.onShow(async (e) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f, _g;
       await ((_a = common_vendor.getCurrentInstance()) == null ? void 0 : _a.appContext.config.globalProperties.$onLaunched);
       pages_index_model.useModel.user.value = (_b = auth == null ? void 0 : auth.data) == null ? void 0 : _b.user;
+      pages_index_model.useModel.pageConfig.value = ((_e = (_d = (_c = auth == null ? void 0 : auth.data) == null ? void 0 : _c.config) == null ? void 0 : _d.companyConfig) == null ? void 0 : _e.config_value) || {};
       console.log("页面显示");
-      if ((_c = common_libraries_userUserLogin.getUserLogin) == null ? void 0 : _c.getLoginStatus()) {
+      if ((_f = common_libraries_userUserLogin.getUserLogin) == null ? void 0 : _f.getLoginStatus()) {
-        (_d = pages_index_method.method) == null ? void 0 : _d.getCountBills();
+        (_g = pages_index_method.method) == null ? void 0 : _g.getCountBills();
       }
       if (auth == null ? void 0 : auth.data.house_register) {
         console.log("house_register", auth == null ? void 0 : auth.data.house_register);
@@ -57,7 +58,10 @@ const _sfc_defineComponent = /* @__PURE__ */ common_vendor.defineComponent({
       };
     });
     return (_ctx, _cache) => {
-      return {};
+      var _a, _b, _c;
+      return {
+        a: common_vendor.s(`background:${(_c = (_b = (_a = common_vendor.unref(pages_index_model.useModel)) == null ? void 0 : _a.pageConfig) == null ? void 0 : _b.value) == null ? void 0 : _c.pageColor}`)
+      };
     };
   }
 });

dist/dev/mp-weixin/pages/index/index.wxml

@@ -1 +1 @@
-<view class="home_page"><my-page-head-title u-i="723af36b-0" bind:__l="__l"/><my-page-banner u-i="723af36b-1" bind:__l="__l"/><my-classification u-i="723af36b-2" bind:__l="__l"/><my-news-list u-i="723af36b-3" bind:__l="__l"/><my-ai-input u-i="723af36b-4" bind:__l="__l"/><my-tabs u-i="723af36b-5" bind:__l="__l"/><my-modal-server u-i="723af36b-6" bind:__l="__l"/><my-official-account u-i="723af36b-7" bind:__l="__l"/></view>
+<view class="home_page"><view class="home_page_bg" style="{{a}}"></view><view class="home_page_content"><my-page-head-title u-i="723af36b-0" bind:__l="__l"/><my-page-banner u-i="723af36b-1" bind:__l="__l"/><my-classification u-i="723af36b-2" bind:__l="__l"/><my-news-list u-i="723af36b-3" bind:__l="__l"/><my-ai-input u-i="723af36b-4" bind:__l="__l"/><my-tabs u-i="723af36b-5" bind:__l="__l"/><my-modal-server u-i="723af36b-6" bind:__l="__l"/><my-official-account u-i="723af36b-7" bind:__l="__l"/></view></view>

dist/dev/mp-weixin/pages/index/index.wxss

@@ -1,10 +1,20 @@
 page {
   background-color: #f8f8f8;
 }
-.home_page {
+.home_page_bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 37%;
+  z-index: 0;
   background: linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(146deg, #d3d7ff 0%, rgba(255, 255, 255, 0) 100rpx), linear-gradient(194deg, #dffff3 0%, #f7f7f7 200rpx);
   background-repeat: no-repeat;
 }
+.home_page_content {
+  position: relative;
+  z-index: 10;
+}
 button::after {
   border: none;
   padding: 0;

dist/dev/mp-weixin/pages/index/model.js

@@ -1,6 +1,7 @@
 "use strict";
 const common_vendor = require("../../common/vendor.js");
 const useModel = {
+  pageConfig: common_vendor.ref({}),
   formData: common_vendor.reactive({}),
   user: common_vendor.ref({}),
   scrollTop: common_vendor.ref(0),

src/common/store/useWeAppAuthStore.ts

@@ -18,6 +18,15 @@ type DataType = {
   house_register?: boolean
   house_occupant?: boolean
   is_house_exist?: number
+  config?: {
+    companyConfig?: {
+      config_value?: {
+        color?: string
+        pageColor?: string
+        logo?: { url?: string }[]
+      }
+    }
+  }
 }
 
 export const useWeAppAuthStore = defineStore('we_app_auth', () => {
@@ -31,7 +40,8 @@ export const useWeAppAuthStore = defineStore('we_app_auth', () => {
     environment: '',
     house_occupant: false,
     house_register: false,
-    is_house_exist: 0
+    is_house_exist: 0,
+    config: {}
   })
 
   function login(app: any) {
@@ -50,6 +60,7 @@ export const useWeAppAuthStore = defineStore('we_app_auth', () => {
         console.log('登录', res?.data)
         data.value.user = res.data?.user
         data.value.selected_house = res.data?.selected_house
+        data.value.config = res.data?.config
         loading.value = false
         uni.setStorageSync(import.meta.env.VITE_ACCESS_TOKEN_KEY, res?.data?.token?.token)
         if (data.value.user) {

src/pages/index/components/PageHeadTitle.vue

@@ -1,12 +1,20 @@
 <template>
+  <!-- :class="`custom-title ${useModel?.scrollTop?.value > 10 ? 'custom_title_scroll_bg' : ''}`" -->
   <view
-    :class="`custom-title ${useModel?.scrollTop?.value > 10 ? 'custom_title_scroll_bg' : ''}`"
+    class="custom-title"
-    :style="`padding-top:${capsuleRect.top}px;height:${capsuleRect.height}px;line-height:${capsuleRect.height}px;${props?.objStyle}`"
+    :style="`padding-top:${capsuleRect.top}px;height:${capsuleRect.height}px;line-height:${capsuleRect.height}px;${props?.objStyle};${useModel?.scrollTop?.value > 10 ? getPageBgFun() : ''}`"
   >
     <view @click="handlePopupSwitchHouse" class="user_houses_info">
+      <image
+        mode="aspectFill"
+        v-if="userData?.config?.companyConfig?.config_value?.logo?.[0]?.url"
+        :src="userData?.config?.companyConfig?.config_value?.logo?.[0]?.url || ''"
+      />
       <text v-if="!userData?.user">请先登录</text>
       <text v-else-if="!userData?.selected_house">请绑定您的房屋</text>
-      <text v-else>{{ userData?.selected_house?.full_name || '-' }}</text>
+      <view v-else class="full_name">{{
+        truncateString(userData?.selected_house?.full_name || '')
+      }}</view>
       <up-icon name="arrow-down-fill" size="12" color="#333"></up-icon>
     </view>
     <hs-popup-switch-house :show="show" @close="show = false" @change="handleSelectedHouse" />
@@ -43,6 +51,32 @@ const handleSelectedHouse = (e: any) => {
   show.value = false
 }
 
+const getPageBgFun = () => {
+  let cssStrColor =
+    useModel?.pageConfig?.value?.pageColorValue?.colors?.[0]?.color?.metaColor || '#d3d7ff'
+  let cssEndColor =
+    useModel?.pageConfig?.value?.pageColorValue?.colors?.[1]?.color?.metaColor || '#dffff3'
+  let strBgCode = useModel?.pageConfig?.value?.pageColorValue?.colors
+    ? `rgba(${cssStrColor?.r},${cssStrColor?.g},${cssStrColor?.b},${cssStrColor?.a})`
+    : useModel?.pageConfig?.value?.pageColorValue?.[0]?.color
+  let endBgCode = useModel?.pageConfig?.value?.pageColorValue?.colors
+    ? `rgba(${cssEndColor?.r},${cssEndColor?.g},${cssEndColor?.b},${cssEndColor?.a})`
+    : useModel?.pageConfig?.value?.pageColorValue?.[1]?.color
+  let bhg = `background: linear-gradient(180deg,rgba(208, 229, 255, 0.44) 0%,rgba(255, 255, 255, 0) 100%),linear-gradient(146deg,  ${strBgCode} 0%, rgba(255, 255, 255, 0) 55%),linear-gradient(194deg, ${endBgCode} 0%, #f8f8f8 65%);`
+  return bhg
+}
+
+// 截断字符串，限制15个中文字，超过的从中间截取
+const truncateString = (str: string): string => {
+  if (!str) return '-'
+  const maxLength = 15
+  if (str.length <= maxLength) return str
+  // 因为...占3个字符，所以前后各显示6个字符，总共6+3+6=15
+  const start = 6
+  const end = 6
+  return str.slice(0, start) + '...' + str.slice(-end)
+}
+
 watch(
   () => auth?.data?.user,
   () => {
@@ -90,6 +124,15 @@ onHide(() => {
     align-items: center;
     justify-content: space-between;
     min-width: 100rpx;
+    .full_name {
+      max-width: 300rpx;
+      padding: 0 15rpx;
+      overflow: hidden;
+    }
+    image {
+      width: 48rpx;
+      height: 48rpx;
+    }
   }
 }
 .custom_title_scroll_bg {

src/pages/index/index.vue

@@ -1,5 +1,8 @@
 <template>
   <view class="home_page">
+    <view class="home_page_bg" :style="`background:${useModel?.pageConfig?.value?.pageColor}`">
+    </view>
+    <view class="home_page_content">
       <MyPageHeadTitle />
       <MyPageBanner />
       <MyClassification />
@@ -9,6 +12,7 @@
       <MyModalServer />
       <MyOfficialAccount />
     </view>
+  </view>
 </template>
 
 <script setup lang="ts">
@@ -46,6 +50,7 @@ onShow(async e => {
   // }
   await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
   useModel.user.value = auth?.data?.user
+  useModel.pageConfig.value = auth?.data?.config?.companyConfig?.config_value || {}
   console.log('页面显示')
   if (getLoginStatus?.getLoginStatus()) {
     method?.getCountBills()

src/pages/index/model.ts

@@ -1,5 +1,6 @@
 import { reactive, ref } from 'vue'
 export default {
+  pageConfig: ref<any>({}),
   formData: reactive({}),
   user: ref<any>({}),
   scrollTop: ref(0),

src/pages/index/style.scss

@@ -4,12 +4,24 @@ page {
 
 .home_page {
   // padding-bottom: 68px;
+}
+.home_page_bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 37%;
+  z-index: 0;
   background:
     linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, rgba(255, 255, 255, 0) 100%),
     linear-gradient(146deg, #d3d7ff 0%, rgba(255, 255, 255, 0) 100rpx),
     linear-gradient(194deg, #dffff3 0%, #f7f7f7 200rpx);
   background-repeat: no-repeat;
 }
+.home_page_content {
+  position: relative;
+  z-index: 10;
+}
 button::after {
   border: none;
   padding: 0;