chore: initial import

pkgExplore/store_detail/components/FacilityList.vue

@@ -0,0 +1,75 @@
+<template>
+  <view class="section-panel" v-if="facilityList && facilityList.length">
+    <view class="section-header">
+      <text class="section-title">{{ t('sectionTitle') }}</text>
+    </view>
+    <view class="facility-grid tn-flex tn-flex-wrap">
+      <view class="facility-item tn-flex tn-flex-direction-column tn-flex-col-center" v-for="(item, index) in facilityList" :key="index">
+        <text :class="item.icon" class="facility-icon"></text>
+        <text class="facility-name">{{ item.name }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    facilityList: {
+      type: Array,
+      default: () => []
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgExplore.store_detail.store_detail', key)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.section-panel {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1rpx solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
+  margin: 24rpx 32rpx 0;
+  padding: 32rpx;
+  border-radius: 24rpx;
+}
+
+.section-header {
+  margin-bottom: 24rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.facility-grid {
+  gap: 32rpx 0;
+}
+
+.facility-item {
+  width: 25%;
+}
+
+.facility-icon {
+  font-size: 52rpx;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 12rpx;
+}
+
+.facility-name {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+</style>