初始化移动端提交

pages/public/about.vue

@@ -0,0 +1,540 @@
+<template>
+  <s-layout :bgStyle="{ color: '#f5f7fa' }" class="about-page" title="关于我们">
+    <u-card :show-head="false" margin="20rpx" padding="40rpx" border-radius="24rpx">
+      <template #body>
+        <view class="hero-content">
+          <u-avatar
+            v-if="appInfo.logo"
+            :src="sheep.$url.cdn(appInfo.logo)"
+            size="120"
+            bg-color="transparent"
+            class="hero-logo"
+          />
+          <u-text 
+            :text="displayName" 
+            type="primary" 
+            size="40rpx" 
+            bold 
+            color="#fff"
+            class="hero-name"
+          />
+          <u-text 
+            :text="`${displayName} 致力于用开源的数字化能力，帮助企业快速构建电商、营销与业务协同平台。`" 
+            size="28rpx" 
+            color="rgba(255,255,255,0.9)"
+            class="hero-slogan"
+          />
+          <view class="hero-tags">
+            <u-tag 
+              v-for="tag in heroTags" 
+              :key="tag"
+              :text="tag" 
+              bg-color="rgba(255,255,255,0.16)" 
+              color="#fff"
+              size="mini"
+              shape="circle"
+              plain
+            />
+          </view>
+        </view>
+      </template>
+    </u-card>
+
+    <u-row gutter="16" class="metrics-row">
+      <u-col span="4" v-for="metric in metrics" :key="metric.title">
+        <u-card :show-head="false" margin="0" padding="32rpx 24rpx" border-radius="20rpx">
+          <template #body>
+            <view class="metric-content">
+              <u-text 
+                :text="metric.value" 
+                size="48rpx" 
+                bold 
+                type="primary"
+                class="metric-value"
+              />
+              <u-text 
+                :text="metric.title" 
+                size="26rpx" 
+                bold 
+                color="#303133"
+                class="metric-title"
+              />
+              <u-text 
+                :text="metric.desc" 
+                size="22rpx" 
+                color="#909399"
+                class="metric-desc"
+              />
+            </view>
+          </template>
+        </u-card>
+      </u-col>
+    </u-row>
+
+    <u-card :show-head="false" margin="20rpx" padding="32rpx 28rpx" border-radius="24rpx">
+      <template #body>
+        <u-text text="我们提供什么" size="32rpx" bold color="#303133" class="section-title" />
+        <u-text text="围绕企业全链路经营的核心能力" size="24rpx" color="#909399" class="section-subtitle" />
+        
+        <view class="capability-grid">
+          <u-card 
+            v-for="item in capabilities" 
+            :key="item.title"
+            :show-head="false" 
+            margin="0 0 24rpx 0" 
+            padding="28rpx" 
+            border-radius="20rpx"
+            bg-color="linear-gradient(135deg, rgba(245, 247, 250, 1), rgba(245, 247, 250, 0.6))"
+          >
+            <template #body>
+              <u-text :text="item.title" size="30rpx" bold color="#2c3e50" class="capability-title" />
+              <u-text :text="item.desc" size="24rpx" color="#606266" class="capability-desc" />
+              <view class="capability-tags">
+                <u-tag 
+                  v-for="tag in item.tags" 
+                  :key="tag"
+                  :text="tag" 
+                  bg-color="rgba(0, 85, 162, 0.08)" 
+                  color="var(--ui-BG-Main)"
+                  size="mini"
+                  shape="circle"
+                />
+              </view>
+            </template>
+          </u-card>
+        </view>
+      </template>
+    </u-card>
+
+    <u-card :show-head="false" margin="20rpx" padding="32rpx 28rpx" border-radius="24rpx">
+      <template #body>
+        <u-text text="我们的理念" size="32rpx" bold color="#303133" class="section-title" />
+        
+        <view class="value-list">
+          <u-card 
+            v-for="item in values" 
+            :key="item.title"
+            :show-head="false" 
+            margin="0 0 24rpx 0" 
+            padding="24rpx 26rpx" 
+            border-radius="20rpx"
+            bg-color="rgba(0, 85, 162, 0.05)"
+          >
+            <template #body>
+              <u-text :text="item.title" size="28rpx" bold color="#2c3e50" class="value-title" />
+              <u-text :text="item.desc" size="24rpx" color="#606266" class="value-desc" />
+            </template>
+          </u-card>
+        </view>
+      </template>
+    </u-card>
+
+    <u-card :show-head="false" margin="20rpx" padding="32rpx 28rpx" border-radius="24rpx">
+      <template #body>
+        <u-text text="发展里程碑" size="32rpx" bold color="#303133" class="section-title" />
+        
+        <view class="timeline">
+          <view 
+            class="timeline-item" 
+            v-for="(item, index) in milestones" 
+            :key="item.year"
+          >
+            <view class="timeline-dot"></view>
+            <view class="timeline-content">
+              <u-text :text="item.year" size="28rpx" bold color="#2c3e50" class="timeline-year" />
+              <u-text :text="item.title" size="26rpx" bold color="#303133" class="timeline-title" />
+              <u-text :text="item.desc" size="24rpx" color="#606266" class="timeline-desc" />
+            </view>
+          </view>
+        </view>
+      </template>
+    </u-card>
+
+    <u-card :show-head="false" margin="20rpx" padding="32rpx 28rpx" border-radius="24rpx">
+      <template #body>
+        <u-text text="联系与合作" size="32rpx" bold color="#303133" class="section-title" />
+        <u-text text="欢迎与我们探讨更多共赢的可能" size="24rpx" color="#909399" class="section-subtitle" />
+        
+        <view class="contact-list">
+          <u-cell 
+            v-for="item in contacts" 
+            :key="item.label"
+            :title="item.label"
+            :label="item.value"
+            :is-link="true"
+            arrow-direction="right"
+            bg-color="rgba(245, 247, 250, 0.8)"
+            title-style="font-size: 26rpx; font-weight: 600; color: #2c3e50;"
+            label-style="font-size: 24rpx; color: #606266; word-break: break-all; line-height: 34rpx;"
+            @click="handleContact(item)"
+            class="contact-cell"
+          />
+        </view>
+      </template>
+    </u-card>
+
+    <u-text 
+      text="移动商城 始终坚持开源共享，与开发者和企业伙伴一起打造可持续的数字化生态。" 
+      size="24rpx" 
+      color="#909399"
+      align="center"
+      class="footer-hint"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import sheep from '@/sheep';
+
+const appInfo = computed(() => sheep.$store('app').info || {});
+const displayName = computed(() => appInfo.value.name || '移动商城');
+
+const heroTags = [
+  '100% 开源可商用',
+  '支持多端统一交付',
+  '沉淀企业级最佳实践'
+];
+
+const metrics = [
+  {
+    title: '开源历程',
+    value: '7+',
+    desc: '年持续迭代与社区共建'
+  },
+  {
+    title: '行业方案',
+    value: '20+',
+    desc: '覆盖零售、制造、政企等场景'
+  },
+  {
+    title: '交付效率',
+    value: '30%',
+    desc: '平均缩短客户上线周期'
+  }
+];
+
+const capabilities = [
+  {
+    title: '产品矩阵',
+    desc: '以电商中台为核心，延展直播带货、会员营销、全渠道订单与履约管理。',
+    tags: ['商城交易', '营销裂变', '数据运营']
+  },
+  {
+    title: '技术架构',
+    desc: '基于 Spring Cloud Alibaba + Vue3 + UniApp，支持多租户、微服务与多端同源。',
+    tags: ['微服务', '多端一致', '低代码装修']
+  },
+  {
+    title: '服务体系',
+    desc: '提供从咨询、定制、交付到长期运营的全生命周期陪伴式服务。',
+    tags: ['数字化顾问', '驻场交付', '持续运营']
+  }
+];
+
+const values = [
+  {
+    title: '使命',
+    desc: '让每一家企业都能以更低成本、更快速度完成业务数字化升级。'
+  },
+  {
+    title: '愿景',
+    desc: '打造开放、可信赖、可持续的企业级数字商业生态。'
+  },
+  {
+    title: '价值观',
+    desc: '客户成功、极致体验、持续创新、坦诚协作。'
+  }
+];
+
+const milestones = [
+  {
+    year: '2018',
+    title: '开源起航',
+    desc: '发布首个电商项目原型，与社区开发者共同启动开源计划。'
+  },
+  {
+    year: '2020',
+    title: '企业级升级',
+    desc: '引入多租户、权限与大促能力，满足成长型企业核心诉求。'
+  },
+  {
+    year: '2022',
+    title: '多端一体',
+    desc: '统一 H5、App 与小程序技术栈，实现一次开发，多端交付。'
+  },
+  {
+    year: '2024',
+    title: '智能加速',
+    desc: '引入智能客服、营销推荐等 AI 能力，提升运营效率。'
+  },
+  {
+    year: '2025',
+    title: '生态共建',
+    desc: '联合生态伙伴共建行业方案，形成开放合作的生态体系。'
+  }
+];
+
+const contacts = [
+  {
+    label: '商务合作',
+    value: 'business@iocoder.cn',
+    type: 'email'
+  },
+  {
+    label: '客服热线',
+    value: '400-860-888',
+    type: 'phone',
+    actionValue: '400860888'
+  },
+  {
+    label: '开源仓库',
+    value: 'https://github.com/YunaiV/ruoyi-vue-pro',
+    type: 'link'
+  },
+  {
+    label: '文档中心',
+    value: 'https://doc.iocoder.cn',
+    type: 'link'
+  },
+  {
+    label: '办公地址',
+    value: '浙江省杭州市滨江区江南大道 777 号数字产业园',
+    type: 'text'
+  }
+];
+
+function handleContact(item) {
+  if (item.type === 'phone') {
+    const phoneNumber = item.actionValue || item.value.replace(/[^0-9]/g, '');
+    if (!phoneNumber) {
+      return;
+    }
+    uni.makePhoneCall({
+      phoneNumber,
+      fail: () => {
+        uni.setClipboardData({
+          data: item.value,
+          success: () => {
+            uni.showToast({ title: '号码已复制', icon: 'none' });
+          }
+        });
+      }
+    });
+    return;
+  }
+
+  if (item.type === 'link') {
+    sheep.$router.go('/pages/public/webview', {
+      title: item.label,
+      url: encodeURIComponent(item.value)
+    });
+    uni.setClipboardData({
+      data: item.value,
+      success: () => {
+        uni.showToast({ title: '链接已复制', icon: 'none' });
+      }
+    });
+    return;
+  }
+
+  if (item.type === 'text') {
+    uni.setClipboardData({
+      data: item.value,
+      success: () => {
+        uni.showToast({ title: '地址已复制', icon: 'none' });
+      }
+    });
+    return;
+  }
+
+  uni.setClipboardData({
+    data: item.value,
+    success: () => {
+      uni.showToast({ title: '信息已复制', icon: 'none' });
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.about-page {
+  min-height: 100vh;
+  padding: 0;
+  background: #f5f7fa;
+  box-sizing: border-box;
+}
+
+// Hero card 渐变背景
+:deep(.u-card) {
+  &:first-child {
+    background: linear-gradient(135deg, rgba(0, 85, 162, 0.95), rgba(0, 85, 162, 0.68));
+    box-shadow: 0 16rpx 36rpx rgba(0, 85, 162, 0.25);
+    color: #fff;
+  }
+}
+
+.hero-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+
+  .hero-logo {
+    margin-bottom: 24rpx;
+    border-radius: 24rpx;
+    background: rgba(255, 255, 255, 0.15);
+    padding: 16rpx;
+  }
+
+  .hero-name {
+    margin-bottom: 16rpx;
+  }
+
+  .hero-slogan {
+    margin-bottom: 28rpx;
+    line-height: 42rpx;
+  }
+
+  .hero-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+  }
+}
+
+.metrics-row {
+  margin: 20rpx;
+}
+
+.metric-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+
+  .metric-value {
+    margin-bottom: 8rpx;
+  }
+
+  .metric-title {
+    margin-bottom: 6rpx;
+  }
+
+  .metric-desc {
+    line-height: 32rpx;
+  }
+}
+
+.section-title {
+  margin-bottom: 12rpx;
+}
+
+.section-subtitle {
+  margin-bottom: 24rpx;
+}
+
+.capability-grid {
+  display: flex;
+  flex-direction: column;
+}
+
+.capability-title {
+  margin-bottom: 12rpx;
+}
+
+.capability-desc {
+  margin-bottom: 16rpx;
+  line-height: 38rpx;
+}
+
+.capability-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14rpx;
+}
+
+.value-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.value-title {
+  margin-bottom: 12rpx;
+}
+
+.value-desc {
+  line-height: 36rpx;
+}
+
+.timeline {
+  position: relative;
+  margin-left: 20rpx;
+  padding-left: 20rpx;
+  border-left: 2rpx solid rgba(0, 85, 162, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 32rpx;
+
+  .timeline-item {
+    position: relative;
+
+    .timeline-dot {
+      position: absolute;
+      left: -31rpx;
+      top: 6rpx;
+      width: 16rpx;
+      height: 16rpx;
+      border-radius: 50%;
+      background: var(--ui-BG-Main);
+      box-shadow: 0 0 0 6rpx rgba(0, 85, 162, 0.15);
+    }
+
+    .timeline-content {
+      padding-left: 12rpx;
+
+      .timeline-year {
+        margin-bottom: 6rpx;
+      }
+
+      .timeline-title {
+        margin-bottom: 6rpx;
+      }
+
+      .timeline-desc {
+        line-height: 36rpx;
+      }
+    }
+  }
+}
+
+.contact-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.contact-cell {
+  border-radius: 18rpx;
+  overflow: hidden;
+}
+
+.footer-hint {
+  padding: 24rpx 36rpx 80rpx;
+  line-height: 36rpx;
+}
+
+@media (min-width: 750px) {
+  .metrics-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .capability-grid,
+  .value-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24rpx;
+  }
+}
+</style>